🔥 特性
- 可拖拽指的是可以拖动和移动目标。
- 可调整大小表示可以增加或减少目标的宽度和高度。
- 可缩放表示可以缩放目标的 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
特此免费授予任何获得本软件副本和相关文档文件（"软件"）的人不受限制地处理本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本的权利，并允许向其提供本软件的人这样做，但须符合以下条件：
上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。
本软件按"原样"提供，不附带任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权性的担保。在任何情况下，作者或版权持有人均不对任何索赔、损害或其他责任负责，无论是在合同诉讼、侵权行为或其他方面，由软件或软件的使用或其他交易引起或与之相关。
编辑推荐精选
QoderWork
阿里Qoder团队推出的桌面端AI智能体
QoderWork 是阿里推出的本地优先桌面 AI 智能体，适配 macOS14+/Windows10+，以自然语言交互实现文件管理、数据分析、AI 视觉生成、浏览器自动化等办公任务，自主拆解执行复杂工作流，数据本地运行零上传，技能市场可无限扩展，是高效的 Agentic 生产力办公助手。
音述AI
全球首个AI音乐社区
音述AI是全球首个AI音乐社区，致力让每个人都能用音 乐表达自我。音述AI提供零门槛AI创作工具，独创GETI法则帮助用户精准定义音乐风格，AI润色功能支持自动优化作品质感。音述AI支持交流讨论、二次创作与价值变现。针对中文用户的语言习惯与文化背景进行专门优化，支持国风融合、C-pop等本土音乐标签，让技术更好地承载人文表达。
lynote.ai
一站式搞定所有学习需求
不再被海量信息淹没，开始真正理解知识。Lynote 可摘要 YouTube 视频、PDF、文章等内容。即时创建笔记，检测 AI 内容并下载资料，将您的学习效率提升 10 倍。
AniShort
为AI短剧协作而生
专为AI短剧协作而生的AniShort正式发布，深度重构AI短剧全流程生产模式，整合创意策划、制作执行、实时协作、在线审片、资产复用等全链路功能，独创无限画布、双轨并行工业化工作流与Ani智能体助手，集成多款主流AI大模型，破解素材零散、版本混乱、沟通低效等行业痛点，助力3人团队效率提升800%，打造标准化、可追溯的AI短剧量产体系，是AI短剧团队协同创作、提升制作效率的核心工具。
seedancetwo2.0
能听懂你表达的视频模型
Seedance two是基于seedance2.0的中国大模型，支持图像、视频、音频、文本四种模态输入，表达方式更丰富，生成也更可控。
nano-banana纳米香蕉中文站
国内直接访问，限时3折
输入简单文字,生成想要的图片，纳米香蕉中文站基于 Google 模型的 AI 图片生成网站，支持文字生图、图生图。官网价格限时3折活动
扣子-AI办公
职场AI，就用扣子
AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！
堆友
多风格AI绘画神器
堆友平台由阿里巴巴设计团队创建，作为一款AI驱动的设计工具，专为设计师提供一站式增长服务。功能覆盖海量3D素材、AI绘画、实时渲染以及专业抠图，显著提升设计品质和效率。平台不仅提供工具，还是一个促进创意交流和个人发展的空间，界面友好，适合所有级别的设计师和创意工作者。
码上飞
零代码AI应用开发平台
零代码AI应用开发平台，用户只需一句话简单描述需求，AI能自动生成小程序、APP或H5网页应用，无需编写代码。
Vora
免费创建高清无水印Sora视频
Vora是一个免费创建高清无水印Sora视频的AI工具
推荐工具精选
AI云服务特惠
懂AI专属折扣关注微信公众号
最新AI工具、AI资讯
独家AI资源、AI项目落地
微信扫一扫关注公众号