Moveable

Draggable! Resizable! Scalable! Rotatable!

daybrush/moveable daybrush.com/moveable/moveable

README

Moveable

alt="Vue"

src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"> alt="Vue 3"

src="https://img.shields.io/static/v1.svg?label=&message=Vue%203&style=flat-square&color=3fb984">

Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable

Demo / Storybook / API / Main Project

Moveable
Draggable	Resizable	Scalable	Rotatable

Warpable	Pinchable	Groupable	Snappable

Clippable	Roundable	OriginDraggable	Selecto

🔥 Features

Draggable refers to the ability to drag and move targets.

Resizable indicates whether the target's width and height can be increased or decreased.

Scalable indicates whether the target's x and y can be scale of transform.

Rotatable indicates whether the target can be rotated.

Warpable indicates whether the target can be warped (distorted, bented).

Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.

Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.

Snappable indicates whether to snap to the guideline.

OriginDraggable* indicates Whether to drag origin.

Clippable indicates Whether to clip the target.

Roundable indicates Whether to show and drag or double click border-radius.

Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc)

Support Major Browsers

Support 3d Transform

⚙️ Installation

npm

```sh
$ npm i moveable
```

scripts

``` html
<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
```

📄 Documents

[Moveable Handbook](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md)

[How to use Group](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group)

[How to use custom CSS](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css)

[How to make custom able](https://github.com/daybrush/moveable/blob/master/packages/react-moveable/src/react-moveable/ables/README.md)

API Documentation

🚀 How to use

All classes of moveable control box and able elements have a moveable- prefix. So please don't put moveable- class name in target.

```ts
import Moveable from "moveable";
const moveable = new Moveable(document.body, {
target: document.querySelector(".target"),
// If the container is null, the position is fixed. (default: parentElement(document.body))
container: document.body,
draggable: true,
resizable: true,
scalable: true,
rotatable: true,
warpable: true,
// Enabling pinchable lets you use events that
// can be used in draggable, resizable, scalable, and rotateable.
pinchable: true, // ["resizable", "scalable", "rotatable"]
origin: true,
keepRatio: true,
// Resize, Scale Events at edges.
edge: false,
throttleDrag: 0,
throttleResize: 0,
throttleScale: 0,
throttleRotate: 0,
});
/* draggable */
moveable.on("dragStart", ({ target, clientX, clientY }) => {
console.log("onDragStart", target);
}).on("drag", ({
target, transform,
left, top, right, bottom,
beforeDelta, beforeDist, delta, dist,
clientX, clientY,
}) => {
console.log("onDrag left, top", left, top);
target!.style.left = `${left}px`;
target!.style.top = `${top}px`;
// console.log("onDrag translate", dist);
// target!.style.transform = transform;
}).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onDragEnd", target, isDrag);
});
/* resizable */
moveable.on("resizeStart", ({ target, clientX, clientY }) => {
console.log("onResizeStart", target);
}).on("resize", ({ target, width, height, dist, delta, clientX, clientY }) => {
console.log("onResize", target);
delta[0] && (target!.style.width = `${width}px`);
delta[1] && (target!.style.height = `${height}px`);
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onResizeEnd", target, isDrag);
});
/* scalable */
moveable.on("scaleStart", ({ target, clientX, clientY }) => {
console.log("onScaleStart", target);
}).on("scale", ({
target, scale, dist, delta, transform, clientX, clientY,
}: OnScale) => {
console.log("onScale scale", scale);
target!.style.transform = transform;
}).on("scaleEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onScaleEnd", target, isDrag);
});
/* rotatable */
moveable.on("rotateStart", ({ target, clientX, clientY }) => {
console.log("onRotateStart", target);
}).on("rotate", ({ target, beforeDelta, delta, dist, transform, clientX, clientY }) => {
console.log("onRotate", dist);
target!.style.transform = transform;
}).on("rotateEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onRotateEnd", target, isDrag);
});
/* warpable */
this.matrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
];
moveable.on("warpStart", ({ target, clientX, clientY }) => {
console.log("onWarpStart", target);
}).on("warp", ({
target,
clientX,
clientY,
delta,
dist,
multiply,
transform,
}) => {
console.log("onWarp", target);
// target.style.transform = transform;
this.matrix = multiply(this.matrix, delta);
target.style.transform = `matrix3d(${this.matrix.join(",")})`;
}).on("warpEnd", ({ target, isDrag, clientX, clientY }) => {
console.log("onWarpEnd", target, isDrag);
});
/* pinchable */
// Enabling pinchable lets you use events that
// can be used in draggable, resizable, scalable, and rotateable.
moveable.on("pinchStart", ({ target, clientX, clientY }) => {
// pinchStart event occur before dragStart, rotateStart, scaleStart, resizeStart
console.log("onPinchStart");
}).on("pinch", ({ target, clientX, clientY, datas }) => {
// pinch event occur before drag, rotate, scale, resize
console.log("onPinch");
}).on("pinchEnd", ({ isDrag, target, clientX, clientY, datas }) => {
// pinchEnd event occur before dragEnd, rotateEnd, scaleEnd, resizeEnd
console.log("onPinchEnd");
});
```

📦 Packages

[moveable](https://github.com/daybrush/moveable/blob/master/packages/moveable): A Vanilla Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[react-moveable](https://github.com/daybrush/moveable/blob/master/packages/react-moveable): A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[preact-moveable](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable): A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[ngx-moveable](https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable): An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[svelte-moveable](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable): A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[lit-moveable](https://github.com/daybrush/moveable/blob/master/packages/lit-moveable): A Lit Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[vue-moveable](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable): A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.

[vue3-moveable](https://github.com/daybrush/moveable/blob/master/packages/vue-moveable): A Vue 3 Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable.