🔥 特性
- 可拖拽指的是可以拖动和移动目标。
- 可调整大小表示可以增加或减少目标的宽度和高度。
- 可缩放表示可以缩放目标的 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
特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处理本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许向其提供本软件的人这样做，但须符合以下条件：
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按"原样"提供，不附带任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权性的担保。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或其他交易引起或与之相关。
编辑推荐精选
Keevx
AI数字人视频创作平台
Keevx 一款开箱即用的AI数字人视频创作平台，广泛适用于电商广告、企业培训与社媒宣传，让全球企业与个人创作者无需拍摄剪辑，就能快速生成多语言、高质量的专业视频。
即梦AI
一站式AI创作平台
提供 AI 驱动的图片、视频生成及数字人等功能，助力创意创作
扣子-AI办公
AI办公助手，复杂任务高效处理
AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！
TRAE编程
AI辅助编程，代码自动修复
Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。
蛙蛙写作
AI小说写作助手，一站式润色、改写、扩写
蛙蛙写作—国内先进的AI写作平台，涵盖小说、学术、社交媒体等多场景。提供续写、改写、润色等功能，助力创作者高效优化写作流程。界面简洁,功能全面,适合各类写作者提升内容品质和工作效率。
问小白
全能AI智能助手，随时解答生活与工作的多样问题
问小白，由元石科技研发的AI智能助手，快速准确地解答各种生活和工作问题，包括但不限于搜索、规划和社交互动，帮助用户在日常生活中提高效率，轻松管理个人事务。
Transly
实时语音翻译/同声传译工具
Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。
讯飞智文
一键生成PPT和Word，让学习生活更轻松
讯飞智文是一个利用 AI 技术的项目，能够帮助用户生成 PPT 以及各类文档。无论是商业领域的市场分析报告、年度目标制定，还是学生群体的职业生涯规划、实习避坑指南，亦或是活动策划、旅游攻略等内容，它都能提供支持，帮助用户精准表达，轻松呈现各种信息。
讯飞星火
深度推理能力全新升级，全面对标OpenAI o1
科大讯飞的星火大模型，支持语言理解、知识问答和文本创作等多功能，适用于多种文件和业务场景，提升办公和日常生活的效率。讯飞星火是一个提供丰富智能服务的平台，涵盖科技资讯、图像创作、写作辅助、编程解答、科研文献解读等功能，能为不同需求的用户提供便捷高效的帮助，助力用户轻松获取信息、解决问题，满足多样化使用场景。
Spark-TTS
一种基于大语言模型的高效单流解耦语音令牌文本到语音合成模型
Spark-TTS 是一个基于 PyTorch 的开源文本到语音合成项目，由多个知名机构联合参与。该项目提供了高效的 LLM（大语言模型）驱动的语音合成方案，支持语音克隆和语音创建功能，可通过命令行界面（CLI）和 Web UI 两种方式使用。用户可以根据需求调整语音的性别、音高、速度等参数，生成高质量的语音。该项目适用于多种场景，如有声读物制作、智能语音助手开发等。
推荐工具精选
AI云服务特惠
懂AI专属折扣关注微信公众号
最新AI工具、AI资讯
独家AI资源、AI项目落地
微信扫一扫关注公众号