🔥 特性
- 可拖拽指的是可以拖动和移动目标。
- 可调整大小表示可以增加或减少目标的宽度和高度。
- 可缩放表示可以缩放目标的 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
在开发模式下运行应用。<br/> 打开http://localhost:6006在浏览器中查看。
如果你进行编辑，页面将重新加载。<br/> 你还将在控制台中看到任何lint错误。
⭐️ 支持我们
如果这个项目对你有帮助，请给个⭐️！
👏 贡献
如果你有任何问题或请求，或想为moveable或其他包做出贡献，请随时在issue中提出或给我一个Pull Request。
代码贡献者
这个项目的存在要感谢所有做出贡献的人。[贡献]。
<a href="https://github.com/daybrush/moveable/graphs/contributors"> <img src="https://contrib.rocks/image?repo=daybrush/moveable" /> </a>🐞 错误报告
如果你发现了错误，请通过在GitHub上开启新的Issue来向我们报告。
赞助商
<p align="center"> <a href="https://yellow-cdn.veclightyear.com/835a84d5/bd666f17-4b92-4135-8afa-ec7a871224ff.svg"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/bd666f17-4b92-4135-8afa-ec7a871224ff.svg"/> </a> </p>Open Collective财务贡献者
成为财务贡献者，帮助我们维持我们的社区。[贡献]
个人
<a href="https://opencollective.com/moveable"><img src="https://yellow-cdn.veclightyear.com/835a84d5/d774f2d9-22cf-4d14-aaa8-621d46d4d71b.svg?width=890" /></a>
组织
通过您的组织支持这个项目。您的logo将在此处显示，并链接到您的网站。[贡献]
<a href="https://opencollective.com/moveable/organization/0/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/50302236-7a35-4e23-bb58-f493ed3615ed.svg"/></a> <a href="https://opencollective.com/moveable/organization/1/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/0d82bf3b-d43f-4267-9e5c-6f0df09cd1b2.svg"/></a> <a href="https://opencollective.com/moveable/organization/2/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/fe4d68bd-98d8-4bae-b295-cfaef50a6dac.svg"/></a> <a href="https://opencollective.com/moveable/organization/3/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/ad3dec80-6bdf-4377-a204-18400156a154.svg"/></a> <a href="https://opencollective.com/moveable/organization/4/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/bc7e9650-a154-4f54-9800-c15fa3af56db.svg"/></a> <a href="https://opencollective.com/moveable/organization/5/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/91e1aaca-d5a6-42a0-922f-fdb403595711.svg"/></a> <a href="https://opencollective.com/moveable/organization/6/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/28bc0c56-efe2-440e-ad10-4b943307840b.svg"/></a> <a href="https://opencollective.com/moveable/organization/7/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/2322d80c-4408-4bc8-9cff-3641cf7dba4b.svg"/></a> <a href="https://opencollective.com/moveable/organization/8/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/49ffe9b1-807a-48aa-b01e-b05084ea2dc9.svg"/></a> <a href="https://opencollective.com/moveable/organization/9/website"><img src="https://yellow-cdn.veclightyear.com/835a84d5/571f1b7f-1eff-4e32-a651-c7c3189cd7c5.svg"/></a>
📝 许可证
本项目采用 MIT 许可证。
MIT 许可证
版权所有 (c) 2019 Daybrush
特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处理本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许向其提供本软件的人这样做，但须符合以下条件：
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按"原样"提供，不附带任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权性的担保。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或其他交易引起或与之相关。
编辑推荐精选
博思AIPPT
AI一键生成PPT，就用博思AIPPT！
博思AIPPT，新一代的AI生成PPT平台，支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等，内置海量精美PPT模板，涵盖商务、教育、科技等不同风格，同时针对每个页面提供多种版式，一键自适应切换，完美适配各种办公场景。
潮际好麦
AI赋能电商视觉革命，一站式智能商拍平台
潮际好麦深耕服装行业，是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌，以及国内10万+淘宝、天猫、京东等主流平台的品牌商家，为卖家节省将近85%的出图成本，提升约3倍出图效率，让品牌能够快速上架。
iTerms
企业专属的AI法律顾问
iTerms是法大大集团旗下法律子品牌，基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构，帮助企业扫清合规障碍，筑牢风控防线，成为您企业专属的AI法律顾问。
SimilarWeb流量提升
稳定高效的流量提升解决方案，助力品牌曝光
稳定高效的流量提升解决方案，助力品牌曝光
Sora2视频免费生成
最新版Sora2模型免费使用，一键生成无水印视频
最新版Sora2模型免费使用，一键生成无水印视频
Transly
实时语音翻译/同声传译工具
Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。
讯飞绘文
选题、配图、成文，一站式创作，让 内容运营更高效
讯飞绘文，一个AI集成平台，支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容，加速品牌传播，提升内容营销效果。
TRAE编程
AI辅助编程，代码自动修复
Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。
商汤小浣熊
最强AI数据分析助手
小浣熊家族Raccoon，您的AI智能助手，致力于通过先进的人工智能技术，为用户提供高效、便捷的智能服务。无论是日常咨询还是专业问题解答，小浣熊都能以快速、准确的响应满足您的需求，让您的生活更加智能便捷。
imini AI
像人一样思考的AI智能体
imini 是一款超级AI智能体，能根据人类指令，自主思考、自主完成、并且交付 结果的AI智能体。
推荐工具精选
AI云服务特惠
懂AI专属折扣关注微信公众号
最新AI工具、AI资讯
独家AI资源、AI项目落地
微信扫一扫关注公众号