moveable

<img src="https://yellow-cdn.veclightyear.com/835a84d5/d5dca401-8a22-4152-9195-ea7945f51701.png"/> <h2 align="middle">Moveable</h2> <a href="https://opencollective.com/moveable" alt="Open Collective上的财务贡献者"><img src="https://yellow-cdn.veclightyear.com/835a84d5/67716115-8b28-4f4e-bd88-727db20658d5.svg?label=financial+contributors" /></a> <a href="https://www.npmjs.com/package/moveable" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/83a10560-c634-4bd2-bf0b-bbe40130708b.svg?style=flat-square&color=007acc&label=version" alt="npm版本" /></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://yellow-cdn.veclightyear.com/835a84d5/063fe87e-5606-4b56-a4c5-19a39585be9e.svg?style=flat-square"/> <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/9c06a62a-cb38-418a-8b2a-897dc41bf6db.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.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://yellow-cdn.veclightyear.com/835a84d5/fc0889e8-4a1e-4fed-9342-e7b029259ada.svg?label=&message=Lit&style=flat-square&color=61daeb" /></a> Moveable是可拖动、可调整大小、可缩放、可旋转、可扭曲、可捏合、可分组、可对齐的组件 <a href="https://github.com/daybrush/moveable" target="_blank">Github</a> / <a href="https://daybrush.com/moveable" target="_blank">演示</a> / <a href="https://daybrush.com/moveable/storybook/" target="_blank">Storybook</a> / <a href="https://daybrush.com/moveable/release/latest/doc/" target="_blank">API</a> / <a href="https://github.com/daybrush/scena" target="_blank">主项目</a> <table width="100%" align="center"> <tr> <th colspan="4">可移动</th> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-draggable">可拖拽</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-resizable">可调整大小</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-scalable">可缩放</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-rotatable">可旋转</a></td> </tr> <tr> <td align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ca9dc1d3-eac2-4173-8ef7-129b2ba06f2f.gif" /> </td> <td align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ec6d7f90-42fb-45ca-95f4-9f6560a79c19.gif" /> </td> <td align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/fae17229-1f88-4144-a7ea-0d157b234c63.gif" /> </td> <td align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/626df8f0-1223-4da7-aeb7-07e40dedb1a1.gif" /> </td> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-warpable">可变形</a></td> <td align="center"><a href="https://daybrush.com/moveable/release/latest/doc/Moveable.Pinchable.html">可捏合</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable">可分组</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/snap-bound--snap-guidelines">可对齐</a></td> </tr> <tr> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/3755d63a-08e6-4971-941a-580ca12ee085.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/f7239682-b3b5-4e0f-8151-308eb7c2960b.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/48beacaf-2b84-4657-b061-d03bed399a70.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/f6252a3c-c639-48d4-91e9-b63bb75d70c6.gif"/></td> </tr> <tr> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-clippable">可裁剪</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-roundable">可圆角</a></td> <td align="center"><a href="https://daybrush.com/moveable/storybook/index.html?path=/story/basic--basic-origin-draggable">可拖动原点</a></td> <td align="center"><a href="https://github.com/daybrush/selecto">可选择</a></td> </tr> <tr> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/14c0912a-9ed4-4c31-8008-9d8ca8f217f0.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/ef9480e5-d8ee-48c9-995e-b5171b24bced.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/d06470dd-27fa-425e-ba60-6035dd58856b.gif"/></td> <td align="center"><img src="https://yellow-cdn.veclightyear.com/835a84d5/4408da7a-3d39-4300-a888-154b778617a6.gif"/></td> </tr> </table>

🔥 特性

可拖拽指的是可以拖动和移动目标。
可调整大小表示可以增加或减少目标的宽度和高度。
可缩放表示可以缩放目标的 x 和 y 变换。
可旋转表示目标可以被旋转。
可变形表示目标可以被扭曲（变形、弯曲）。
可捏合表示目标可以通过拖拽、调整大小、缩放、旋转进行捏合操作。
可分组表示目标可以作为一组进行拖拽、调整大小、缩放、旋转。
可对齐表示是否可以对齐到指导线。
可拖动原点表示是否可以拖动原点。
可裁剪表示是否可以裁剪目标。
可圆角表示是否可以显示和拖动或双击边框圆角。
支持 SVG 元素（svg、path、line、ellipse、g、rect等）
支持主流浏览器
支持 3D 变换

⚙️ 安装

npm

$ npm i moveable

scripts

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

📄 文档

🚀 如何使用

Moveable 控制框和功能元素的所有类都有 moveable- 前缀。因此请不要在目标元素上使用 moveable- 类名。

import Moveable from "moveable";
const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    // 如果容器为null，则位置是固定的。（默认值：parentElement(document.body)）
    container: document.body,
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
    // 启用pinchable可以使用在draggable、resizable、scalable和rotateable中使用的事件。
    pinchable: true, // ["resizable", "scalable", "rotatable"]
    origin: true,
    keepRatio: true,
    // 在边缘进行Resize、Scale事件。
    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 */
// 启用pinchable可以使用在draggable、resizable、scalable和rotateable中使用的事件。
moveable.on("pinchStart", ({ target, clientX, clientY }) => {
    // pinchStart事件发生在dragStart、rotateStart、scaleStart、resizeStart之前
    console.log("onPinchStart");
}).on("pinch", ({ target, clientX, clientY, datas }) => {
    // pinch事件发生在drag、rotate、scale、resize之前
    console.log("onPinch");
}).on("pinchEnd", ({ isDrag, target, clientX, clientY, datas }) => {
    // pinchEnd事件发生在dragEnd、rotateEnd、scaleEnd、resizeEnd之前
    console.log("onPinchEnd");
});

📦 包

moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的原生组件。
react-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的React组件。
preact-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Preact组件。
ngx-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Angular组件。
svelte-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Svelte组件。
lit-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Lit组件。
vue-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Vue组件。
vue3-moveable：一个创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可捏拉的Vue 3组件。

⚙️ 开发

moveable仓库使用yarn作为monorepo进行管理。

yarn config set registry https://registry.npmjs.org/

主项目是用react制作的，我使用croact来使其在umd中更轻量。

开发和测试请查看packages/react-moveable。

`npm run storybook`

$ yarn
$ npm run packages:build
$ npm run storybook

在开发模式下运行应用。 打开http://localhost:6006在浏览器中查看。

如果你进行编辑，页面将重新加载。 你还将在控制台中看到任何lint错误。

⭐️ 支持我们

如果这个项目对你有帮助，请给个⭐️！

👏 贡献

如果你有任何问题或请求，或想为moveable或其他包做出贡献，请随时在issue中提出或给我一个Pull Request。

代码贡献者

这个项目的存在要感谢所有做出贡献的人。[贡献]。

🐞 错误报告

如果你发现了错误，请通过在GitHub上开启新的Issue来向我们报告。

赞助商

Open Collective财务贡献者

成为财务贡献者，帮助我们维持我们的社区。[贡献]

个人

组织

通过您的组织支持这个项目。您的logo将在此处显示，并链接到您的网站。[贡献]

📝 许可证

本项目采用 MIT 许可证。

MIT 许可证

版权所有 (c) 2019 Daybrush

特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处理本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许向其提供本软件的人这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。

本软件按"原样"提供，不附带任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权性的担保。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或其他交易引起或与之相关。