Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable

Category: Javascript , Recommended | August 24, 2019
Author: daybrush
Views Total: 89
Official Page: Go to website
Last Update: August 24, 2019
License: MIT

Preview:

Create Draggable/Resizable/Scalable/Rotatable/Warpable Element – moveable

Description:

moveable is a JavaScript library that makes an element draggable, resizable, scalable, rotatable and wrapable.

How to use it:

Install and import the moveable.

# NPM
$ npm install moveable --save
import Moveable from "moveable";

Or load the umd version from the dist folder.

<script src="/dist/moveable.min.js"></script>
<-- or from a cdn -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/moveable.min.js"></script>

Initialize the Moveable library and specify the target element.

const moveable = new Moveable(document.body, {
      target: document.querySelector(".target"),
      container: null,
      rotatable: false,
      draggable: false,
      scalable: false,
      resizable: false,
      warpable: false,
      pinchable: true, // ["resizable", "scalable", "rotatable"]
      keepRatio: true,
      origin: true,
      edge: false, // resize, scale events at edges
      throttleDrag: 0,
      throttleResize: 0,
      throttleScale: 0,
      throttleRotate: 0,
});

Callback functions.

const moveable = new Moveable(document.body, {
    OnDrag: function () {},
    OnDragEnd: function () {},
    OnDragGroup: function () {},
    OnDragGroupEnd: function () {},
    OnDragGroupStart: function () {},
    OnDragStart: function () {},
    OnPinch: function () {},
    OnPinchEnd: function () {},
    OnPinchGroup: function () {},
    OnPinchGroupEnd: function () {},
    OnPinchGroupStart: function () {},
    OnPinchStart: function () {},
    OnResize: function () {},
    OnResizeEnd: function () {},
    OnResizeGroup: function () {},
    OnResizeGroupEnd: function () {},
    OnResizeGroupStart: function () {},
    OnResizeStart: function () {},
    OnRotate: function () {},
    OnRotateEnd: function () {},
    OnRotateGroup: function () {},
    OnRotateGroupEnd: function () {},
    OnRotateGroupStart: function () {},: function () {},
    OnRotateStart: function () {},
    OnScale: function () {},
    OnScaleEnd: function () {},
    OnScaleGroup: function () {},
    OnScaleGroupEnd: function () {},
    OnScaleGroupStart: function () {},
    OnScaleStart: function () {},
    OnWarp: function () {},
    OnWarpEnd: function () {},
    OnWarpStart: function () {},
});

Event handlers.

moveable.on("drag", ({ target, transform }) => {
  target.style.transform = transform;
});

moveable.on("dragEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});

moveable.on("dragGroup", ({ targets, events }) => {
  console.log("onDragGroup", targets);
  events.forEach(ev => {
       // drag event
       console.log("onDrag left, top", ev.left, ev.top);
       // ev.target!.style.left = `${ev.left}px`;
       // ev.target!.style.top = `${ev.top}px`;
       console.log("onDrag translate", ev.dist);
       ev.target!.style.transform = ev.transform;)
  });
});

moveable.on("dragGroupEnd", ({ targets, isDrag }) => {
  console.log("onDragGroupEnd", targets, isDrag);
});

moveable.on("dragGroupStart", ({ targets }) => {
  console.log("onDragGroupStart", targets);
});

moveable.on("dragStart", ({ target }) => {
  console.log(target);
});

moveable.on("pinch", ({ target }) => {
  console.log(target);
});

moveable.on("rotate", ({ target }) => {
  console.log(target);
});

moveable.on("scale", ({ target }) => {
  console.log(target);
});

moveable.on("pinchEnd", ({ target }) => {
  console.log(target);
});

moveable.on("rotateEnd", ({ target }) => {
  console.log(target);
});

moveable.on("scaleEnd", ({ target }) => {
  console.log(target);
});

moveable.on("pinchGroup", ({ targets, events }) => {
  console.log("onPinchGroup", targets);
});

moveable.on("pinchGroupEnd", ({ targets, isDrag }) => {
  console.log("onPinchGroupEnd", targets, isDrag);
});

moveable.on("pinchGroupStart", ({ targets }) => {
  console.log("onPinchGroupStart", targets);
});

moveable.on("pinchStart", ({ target }) => {
  console.log(target);
});

moveable.on("rotateStart", ({ target }) => {
  console.log(target);
});

moveable.on("scaleStart", ({ target }) => {
  console.log(target);
});

moveable.on("resize", ({ target, width, height }) => {
  target.style.width = `${e.width}px`;
  target.style.height = `${e.height}px`;
});

moveable.on("resizeEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});

moveable.on("resizeGroup", ({ targets, events }) => {
  console.log("onResizeGroup", targets);
  events.forEach(ev => {
      const offset = [
          direction[0] < 0 ? -ev.delta[0] : 0,
          direction[1] < 0 ? -ev.delta[1] : 0, ]; // ev.drag is a drag event that occurs when the group resize. const left = offset[0] + ev.drag.beforeDist[0]; const top = offset[1] + ev.drag.beforeDist[1]; const width = ev.width; const top = ev.top; }); }); moveable.on("resizeGroupEnd", ({ targets, isDrag }) => {
  console.log("onResizeGroupEnd", targets, isDrag);
});

moveable.on("resizeGroupStart", ({ targets }) => {
  console.log("onResizeGroupStart", targets);
});

moveable.on("resizeStart", ({ target }) => {
  console.log(target);
});

moveable.on("rotate", ({ target, transform, dist }) => {
  target.style.transform = transform;
});

moveable.on("rotateEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});

moveable.on("rotateGroup", ({ targets, events }) => {
  console.log("onRotateGroup", targets);
  events.forEach(ev => {
      const target = ev.target;
      // ev.drag is a drag event that occurs when the group rotate.
      const left = ev.drag.beforeDist[0];
      const top = ev.drag.beforeDist[1];
      const deg = ev.beforeDist;
  });
});

moveable.on("rotateGroupEnd", ({ targets, isDrag }) => {
  console.log("onRotateGroupEnd", targets, isDrag);
});

moveable.on("rotateGroupStart", ({ targets }) => {
  console.log("onRotateGroupStart", targets);
});

moveable.on("rotateStart", ({ target }) => {
  console.log(target);
});

moveable.on("scale", ({ target, transform, dist }) => {
  target.style.transform = transform;
});

moveable.on("scaleEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});

moveable.on("scaleGroup", ({ targets, events }) => {
  console.log("onScaleGroup", targets);
  events.forEach(ev => {
      const target = ev.target;
      // ev.drag is a drag event that occurs when the group scale.
      const left = ev.drag.beforeDist[0];
      const top = ev.drag.beforeDist[0];
      const scaleX = ev.scale[0];
      const scaleX = ev.scale[1];
  });
});

moveable.on("scaleGroupEnd", ({ targets, isDrag }) => {
  console.log("onScaleGroupEnd", targets, isDrag);
});

moveable.on("scaleGroupStart", ({ targets }) => {
  console.log("onScaleGroupStart", targets);
});

moveable.on("scaleStart", ({ target }) => {
  console.log(target);
});

moveable.on("warp", ({ target, transform, delta, multiply }) => {
 // target.style.transform = transform;
 matrix = multiply(matrix, delta);
 target.style.transform = `matrix3d(${matrix.join(",")})`;
});

moveable.on("warpEnd", ({ target, isDrag }) => {
  console.log(target, isDrag);
});

moveable.on("warpStart", ({ target }) => {
  console.log(target);
});

API methods.

// destroy
moveable.destroy();

// checks if is moveable element
moveable.isMoveableElement(e.target);

// update
moveable.updateTarget();

// trigger an event
moveable.on(event);

// unbind an event
moveable.off(event);

Changelog:

v0.7.5 (08/24/2019)

  • bugfix

v0.7.4 (08/24/2019)

  • Fix that pinch does not occur when pressed at the same time.
  • Fix that scrolls and drags occur simultaneously and racks occur.
  • Fix that mis-calculating when a static element is a parent.
  • Fix that destroy() error

v0.7.3 (08/23/2019)

  • fix infinite loop issue.

v0.7.2 (08/21/2019)

  • Remove react types.

v0.7.1 (08/20/2019)

  • Add Groupable
  • Add edge option
  • Add direction parameter on resize event
  • Fix that do not call resizeEnd
  • Remove unnecessary code.

v0.6.4 (08/07/2019)

  • fix missing throttleScale
  • fix ESM config

You Might Be Interested In:


Leave a Reply