大家好！欢迎来到程序视点，我是你们的老朋友.安戈。

前俩天逛 Github 发现一个很好用得可拖拽插件，基于 Sortable.js 的 vue 组件 Draggable ，用以实现拖拽功能。

@shopify/draggable 使用现代JavaScript语法构建，并支持多种传感器，包括鼠标、触摸、力触控以及原生拖放事件。让开发者可以轻松实现可视化拖拽、排序等效果。

Draggable

安装

你可以使用yarn 或者 npm 安装库，也可以通过CDN直接引入。

npm install @shopify/draggable --save or yarn add @shopify/draggable

项目及技术应用场景

@shopify/draggable 可广泛应用于各种交互式界面，如：

• 文件管理器：实现文件或文件夹的拖放排序。
• 日历应用：拖动事件以调整日期和时间。
• 图表或图形设计工具：方便移动图表元素。
• 列表或卡片视图：元素可轻松排序或交换位置。
• 虚拟桌面：自由摆放虚拟图标或窗口。

项目特点

• 跨平台兼容性：支持最新版本的 Chrome、Firefox、Opera、Safari 和 Edge 浏览器。
• 模块化设计：各个组件独立，易于集成和扩展。
• 响应式事件：支持鼠标、触摸和力触控等多种输入方式。
• 自定义事件：丰富的事件系统，允许你在拖放过程中插入自定义逻辑。
• 轻量级：小型的包尺寸（仅16.2kB），对性能影响小。
• TypeScript支持：为开发人员提供类型安全的编码体验。

官方案例

1、3D拖拽效果

源码地址：https://github.com/Shopify/draggable/tree/main/examples/src/content/Home

2、开关效果

源码地址：https://github.com/Shopify/draggable/tree/main/examples/src/content/Draggable/DragEvents

3、可拖拽网格效果

源码地址：https://github.com/Shopify/draggable/tree/main/examples/src/content/Droppable/UniqueDropzone还有更多案例可以去官方的案例库学习一下，Draggable 在Github已经斩获 17.7K Star ，非常好用的一个拖拽库，有兴趣的伙伴可以体验学习一下。

Github地址：https://github.com/Shopify/draggable

最后

【程序视点】助力打工人减负，从不是说说而已！Cursor是普通人接触AI编程最简单最轻松的方式，代码不再是鸿沟！

如果你觉得这篇教程有帮助，别忘了【点赞+收藏+关注】三连支持！

后续安戈会持续分享更多开发工具和技巧，敬请期待！如果有其他工具需求，欢迎留言讨论~  🚀