Moveable

<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/logo.png"/></p> <h2 align="middle">Moveable</h2> <p align="middle"> <a href="https://opencollective.com/moveable" alt="Financial Contributors on Open Collective"><img src="https://opencollective.com/moveable/all/badge.svg?label=financial+contributors" /></a> <a href="https://www.npmjs.com/package/moveable" target="_blank"><img src="https://img.shields.io/npm/v/moveable.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a> <a href="https://github.com/daybrush/moveable/actions" target="_blank"><img alt="Github actions" src="https://img.shields.io/github/actions/workflow/status/daybrush/moveable/run-e2e.yml?branch=master&style=flat-square" /></a> <img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/> <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/moveable.svg?style=flat-square&label=license&color=08CE5D"/></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/react-moveable" target="_blank"> <img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/preact-moveable" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/vue-moveable" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/vue3-moveable" target="_blank"><img alt="Vue 3" src="https://img.shields.io/static/v1.svg?label=&message=Vue%203&style=flat-square&color=3fb984" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/svelte-moveable" target="_blank"><img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38" /></a> <a href="https://github.com/daybrush/moveable/tree/master/packages/lit-moveable" target="_blank"><img alt="Lit" src="https://img.shields.io/static/v1.svg?label=&message=Lit&style=flat-square&color=61daeb" /></a> </p> <p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable</p> <p align="middle"> <a href="https://github.com/daybrush/moveable" target="_blank"><strong>Github</strong></a> / <a href="https://daybrush.com/moveable" target="_blank"><strong>Demo</strong></a> / <a href="https://daybrush.com/moveable/storybook/" target="_blank"><strong>Storybook</strong></a> / <a href="https://daybrush.com/moveable/release/latest/doc/" target="_blank"><strong>API</strong></a> / <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a> </p> <table width="100%" align="center"> <tr> <th colspan="4">Moveable</th> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable"><strong>Draggable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable"><strong>Resizable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable"><strong>Scalable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable"><strong>Rotatable</strong></a></td> </tr> <tr> <td align="center"> <img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/draggable.gif" /> </td> <td align="center"> <img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/resizable.gif" /> </td> <td align="center"> <img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/scalable.gif" /> </td> <td align="center"> <img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/rotatable.gif" /> </td> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable"><strong>Warpable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html"><strong>Pinchable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable"><strong>Groupable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines"><strong>Snappable</strong></a></td> </tr> <tr> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/warpable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/pinchable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/groupable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/snappable.gif"/></td> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable"><strong>Clippable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable"><strong>Roundable</strong></a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable"><strong>OriginDraggable</strong></a></td> <td align="center"><a href="https://github.com/daybrush/selecto"><strong>Selecto</strong></a></td> </tr> <tr> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/clippable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/roundable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/origindraggable.gif"/></td> <td align="center"><img src="https://raw.githubusercontent.com/daybrush/moveable/master/demo/images/selecto.gif"/></td> </tr> </table>

🔥 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

$ npm i moveable

scripts

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

📄 Documents

• Moveable Handbook
• How to use Group
• How to use custom CSS
• How to make custom able
• 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.

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, dis