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

Category: Javascript , Recommended | September 19, 2020
Author:daybrush
Views Total:36 views
Official Page:Go to website
Last Update:September 19, 2020
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, roundable, clippable, 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,
      rootContainer: null,
      rotatable: false,
      rotationPosition: "top",
      roundable: true,
      roundRelative: false,
      draggable: false,
      dragTarget: target,
      scalable: false,
      resizable: false,
      warpable: false,
      pinchable: true, // ["resizable", "scalable", "rotatable"]
      pinchThreshold: 0,
      pinchOutside: true,
      clippable: true,
      defaultClipPath: "inset",
      customClipPath: "",
      clipRelative: false,
      clipArea: false,
      dragWithClip: true,
      triggerAblesSimultaneously: false,
      snappable: true,
      snapElement: true,
      snapThreshold: 5,
      snapVertical: true,
      snapHorizontal: true,
      snapCenter: false,
      snapDigit: 0,
      snapGap: true,
      snapDistFormat: self,
      isDisplaySnapDigit: true,
      originDraggable: true,
      scrollable: true,
      scrollContainer: document.body,
      scrollThreshold: 0,
      getScrollPosition: ({ scrollContainer }) => ([scrollContainer.scrollLeft, scrollContainer.scrollTop]),
      bounds: { left: 0, top: 0, bottom: 1000, right: 1000 },
      innerBounds: null,
      innerBound: null,
      verticalGuidelines: [100, 200, 300],
      horizontalGuidelines: [0, 100, 200],
      elementGuidelines: [document.querySelector(".element")],
      keepRatio: true,
      origin: true,
      padding: null,
      zoom: 1,
      dragArea: false,
      edge: false, // resize, scale events at edges
      clipVerticalGuidelines: [0, 100, 200],
      clipHorizontalGuidelines: [0, 100, 200],
      clipSnapThreshold: 5,
      clipTargetBounds: true,
      throttleDrag: 0,
      throttleResize: 0,
      throttleScale: 0,
      throttleRotate: 0,
      throttleDragRotate: 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("click", ({ hasTarget, containsTarget, targetIndex }) => {
  // If you click on an element other than the target and not included in the target, index is -1.
  console.log("onClickGroup", target, hasTarget, containsTarget, targetIndex);
});

moveable.on("clickGroup", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {
  // If you click on an element other than the target and not included in the target, index is -1.
  console.log("onClickGroup", inputTarget, isTarget, containsTarget, targetIndex);
});

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("pinchEnd", ({ 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("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("render", ({ target }) => {
  console.log("onRender", target);
});

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

moveable.on("renderGroup", ({ targets }) => {
  console.log("onRenderGroup", targets);
});

moveable.on("renderGroupEnd", ({ targets }) => {
  console.log("onRenderGroupEnd", targets);
});

moveable.on("renderGroupStart", ({ targets }) => {
  console.log("onRenderGroupStart", targets);
});

moveable.on("renderStart", ({ target }) => {
  console.log("onRenderStart", 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("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("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("scroll", ({ scrollContainer, direction }) => {
  scrollContainer.scrollLeft += direction[0] * 10;
  scrollContainer.scrollTop += direction[1] * 10;
});

moveable.on("snap", e => {
  console.log("onSnap", e);
});

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 dragging
moveable.isDragging();

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

// check whether an event has been attached to a component.
moveable.hasOn(eventName);

// indicate whether the event is attached. 
moveable.hitTest(el);

// indicate whether the event is attached. 
moveable.hitTest(el);

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

// Instantly Request (requestStart - request - requestEnd)
moveable.request("draggable", { deltaX: 10, deltaY: 10, isInstant: true });

// Start move
const requester = moveable.request("draggable");
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.request({ deltaX: 10, deltaY: 10 });
requester.requestEnd();

// 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.19.3 (09/19/2020)

  • Fix svelte-moveable types
  • Fix rootContainer is not worked

v0.19.1 (09/15/2020)

  • Export getElementInfo function (moveable, react-moveable)
  • Add translateZ prop
  • Support click, clickGroup event for no dragArea
  • Add passDragArea prop
  • Add clipVerticalGuidelines, clipHorizontalGuidelines, clipTargetBounds, clipSnapThreshold props
  • Support target’s string, React.RefObject type
  • Bugs fixed

v0.18.5 (07/17/2020)

  • Fix Safari Offset Calculation
  • Fix SVG Transform Origin Calculation
  • Fix SVG ClientSize Calculation

v0.18.4 (07/15/2020)

  • Bugfix

v0.18.3 (07/14/2020)

  • Bugfix

v0.18.2 (07/13/2020)

  • Add roundable props
  • Add originDraggable props
  • Add clippable props
  • Add cspNonce props
  • Add setMin, setMax property in resizable event
  • Add top-left, top-right, …etc 8 direction value for rotatable
  • Add moveable-dragging className
  • Add lastEvent property
  • Fix angular dependecies
  • Fix @daybrush/utils types
  • Fix zero dist issue
  • Fix that innerBounds not works and change bounds color

v0.7.10 (06/08/2020)

  • Fixed: resize could go outside the configured boundaries

v0.17.9 (06/06/2020)

  • Fix Resize issue when container has keepRatio + rotated + with snapGuideLines
  • Fix contextmenu issue

v0.17.8 (05/31/2020)

  • Fix CSS’s camelized name issue

v0.17.7 (05/30/2020)

  • Fix CSS’s camelized name issue
  • Fix wrong maxWidth, maxHeight caculation issue for innerBounds and bounds
  • Remove @types/react , @types/react-dom
  • Fix @daybrush/drag’s version issue

v0.17.6 (05/18/2020)

  • Fix firefox’s getBoundingClientRect
  • Fix that zoom is not working

v0.17.5 (05/07/2020)

  • Fix client position
  • Caculate min, max size for Resizable

v0.17.4 (05/06/2020)

  • Fix that getElement() is not a function

v0.17.3 (05/05/2020)

  • Fix duplicated drag are and padding area.
  • Fix that click event is not fired.

v0.17.2 (05/03/2020)

  • Fix padding’s background color
  • Fix first rendering issue

v0.17.1 (05/03/2020)

  • Add padding, dragTarget props
  • Add snapDistFormat props
  • Add pinchOutside props
  • Add hitTest method
  • Fix bugs

v0.16.3 (04/04/2020)

  • Fixed: isPinch is undefined during onDrag (when actually pinching on mobile)
  • Fixed: Pinch Central Problem

v0.16.2 (04/01/2020)

  • Fix SVG Firefox Issue
  • when isDisplaySnapDigit={false} the number is displayed but set to 0

v0.16.1 (03/31/2020)

  • Add snapGap props
  • Add onSnap event
  • Add triggerAblesSimultaneously props
  • Add isDragging method
  • Bugs fixed

v0.15.2 (03/06/2020)

  • Fix rootContainer for 2d transform

v0.14.1 (02/06/2020)

  • Support scrollable, onScroll for resizable, scalable
  • Add zoom props
  • Add rootContainer props with Absolute Container Matrix(SVG, elementGuidelines is not supported)
  • Add snapDigit props
  • Add isDisplaySnapDigit props
  • Add innerBounds props
  • Add request method (Draggable, Resizable, Rotatable, Scalable)
  • Bugfix

v0.14.1 (02/06/2020)

  • Updated

v0.14.0 (02/03/2020)

  • Add throttleDragRotate (Drag only X axis or Y axis when hold SHIFT like Photoshop, Illustrator)
  • Support for displaying snap distances in elementGuidelines
  • Support bounds for a rotated system

v0.13.4 (01/13/2020)

  • Bugs fixed

v0.13.3 (12/31/2019)

  • Bugs fixed

v0.13.2 (12/26/2019)

  • Bugs fixed

v0.13.0 (12/12/2019)

  • Add snapVertical, snapHorizontal, snapElement props.
  • Add set method on rotateGroup event.
  • Add dashed line in element guidelines.
  • Bugs Fixed

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