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

Category: Javascript , Recommended | November 29, 2019
Author: daybrush
Views Total: 282
Official Page: Go to website
Last Update: November 29, 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, scrollable, rotatable and wrappable.

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,
      rotationPosition: "top",
      draggable: false,
      scalable: false,
      resizable: false,
      warpable: false,
      pinchable: true, // ["resizable", "scalable", "rotatable"]
      pinchThreshold: 0,
      snappable: true,
      snapThreshold: 5,
      snapCenter: false,
      scrollable: true,
      scrollContainer: document.body,
      scrollThreshold: 0,
      getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
      bounds: { left: 0, top: 0, bottom: 1000, right: 1000 },
      verticalGuidelines: [100, 200, 300],
      horizontalGuidelines: [0, 100, 200],
      elementGuidelines: [document.querySelector(".element")],
      keepRatio: true,
      origin: true,
      edge: false, // resize, scale events at edges
      throttleDrag: 0,
      throttleResize: 0,
      throttleScale: 0,
      throttleRotate: 0,
      renderDirections: ["n", "nw", "ne", "s", "se", "sw", "e", "w"],
      className: "",
      defaultGroupRotate: 0 // Sets the initial rotation of the group
});

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 () {},
    OnRenderStart: function () {},
    OnRender: function () {},
    OnRenderEnd: function () {},
    OnRenderGroupStart: function () {},
    OnRenderGroup: function () {},
    OnRenderGroupEnd: 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("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
})

moveable.on("scrollGroup", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

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();

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

// get the vertex information, position and offset size information of the target based on the container
moveable.getRect();

// update the shape of the moveable
moveable.updateRect();

// change options or properties
moveable.setState(state, callbackopt);

// triggers a custom event
moveable.trigger(eventName, customEventopt, ...restParam);

// update
moveable.updateTarget();

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

// executs event just one time
moveable.once(event);

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

Changelog:

v0.12.0 (11/29/2019)

  • Add defaultGroupRotate props
  • Fix that clickGroup does not trigger after rotating
  • Fix that at certain angles, moveable-control handle gets cut
  • Fix that Element “sliding” when resizing

v0.11.1 (11/23/2019)

  • Fix Resizable’s base direction caculation

v0.11.0 (11/23/2019)

  • Add baseDirection props
  • Add offsetWidth, offsetHeight in getRect’s method return value
  • Fix Resizable’s wrong position calculation
  • Fixed the problem that resize can’t snap

v0.10.8 (11/21/2019)

  • Fix Resizable’s wrong position calculation.
  • Fixes incorrect import issue in Preact.

v0.10.5 (11/16/2019)

  • Fixed calculation of client, offset position considering borderWidth.
  • Fixed zero scale.

v0.10.4 (11/15/2019)

  • Fixes incorrect calculation when parent element is static in safari.

v0.10.2 (11/13/2019)

  • Fix that scale or resize with keepRatio, snap is wrong.
  • Fix that guidelines do not appear when dragging.

v0.9.10 (11/09/2019)

  • Add scrollable props.
  • Add onScroll, onScrollGroup event.
  • Add scrollContainer props.
  • Add getScrollPosition props.
  • Add currentTarget and inputEvent on all events.
  • Add setState method.
  • Add getRect method.
  • Add renderDirection props.
  • Add className props.
  • Add onClick event.
  • Add onRenderStart, onRender, onRenderEnd events.
  • Add onRenderGroupStart, onRenderGroup, onRenderGroupEnd events.
  • Add warp in top, right, bottom and left directions.
  • Lots of bugs fixed.

v0.9.8 (10/27/2019)

  • Fix that miscaculate static parent’s offset position
  • Fix dragArea’s transformOrigin

v0.9.7 (10/17/2019)

  • Fix typo that elemenGuildelines to elementGuidelines

v0.9.6 (10/14/2019)

  • Update PreactX
  • Fix that setState is not a function

v0.9.5 (10/01/2019)

  • fix that parent drag event occur snap.

v0.9.4 (10/01/2019)

  • Fix that resizing north, west direction occur decimal point issue.
  • Disable pinchable with snappable.
  • Fix offset caculation for Webkit

v0.9.3 (10/01/2019)

  • fix that keepRatio want to behave like sketches and illustrators
  • fix keepRatio default false

v0.9.2 (10/01/2019)

  • fix that bounds don’t apply when snap

v0.9.1 (09/30/2019)

  • remove console.log
  • Add Snappable (Drag, Resize, Scale, Warp)
  • Add horizontalGuidelines & verticalGuidelines & elementGuidelines
  • Add bounds option (boundaries)
  • Add rotationPositoin option for rotation handle position
  • Add dragArea option
  • Add dragStart event on resizeStart, scaleStart.
  • Add drag event on resize, scale.
  • Add set parameter function on warpStart.
  • Fixed north and west controls want to behave like photoshop
  • Fix offset caculation for Webkit

v0.8.0 (08/28/2019)

  • Add pinchThreshold option that set minimum distance to pinch easily.
  • Add events parameter for all groupStart event. (such as onDragGroupStart, onScaleGroupStart, …etc)
  • Add clickGroup event to find clicked target in the group
  • Add set event method for all start event for absolute value. (such as onDragStart, onScaleStart, …etc)
  • Add dragStart method for external mouse, touch event.
  • Add isInside method that the coordinates are inside Moveable
  • Update @daybrush/[email protected]
  • Fix the way dist is used in onScale event

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