高品质 Vue 动态自由拖拽组件VueDraggable

这次给大家分享一款受开发者青睐的Vue拖拽组件Vue.Draggable。

vuedraggable 基于 Sortable.js 的Vue拖放组件，star高达12.6K+。支持拖放和视图模型数组同步，并提供 Sortable.js 的所有功能。

该作者开发的 Sortable.js，star 20.7K+。不依赖jQ，用于浏览器及移动设备自由拖拽排序，支持在 Vue、React及Angular 下使用。

https://github.com/SortableJS/Sortable

功能特性

• 完全支持 Sortable.js 功能：
• 支持触摸设备
• 支持拖动手柄和可选文本
• 智能自动滚动支持
• 不同列表之间的拖放
• 没有 jQuery 依赖
• 保持同步HTML和视图模型列表
• 与 Vue.js 2.0 transition-group 兼容
• 支持取消
• 在需要完全控制时报告任何更改的事件
• 重用现有的 UI 库组件（例如 vuetify、element 或 vue 材料等）

安装

$ npm i vuedraggable -S

支持浏览器cdn引入使用

使用插件

ghost-class 和 handle

ghost指的是在拖拽体原本位置占坑的那个元素。

ghost-class 就是给占坑的元素设置样式。

...

handle 就是拖拽的抓手，表示拖拽元素指定的可拖拽部分。

正常情况下拖拽元素整体是可拖拽，加了handle后，只有指定的地方可以拖拽，其它地方则不能进行拖拽。

    

        
        {{ element.name }} 
        
    

最后附上示例及项目地址

# 示例地址
https://sortablejs.github.io/Vue.Draggable/

# 仓库地址
https://github.com/SortableJS/Vue.Draggable

ok，就分享这么多。希望对大家有所帮助，感兴趣的小伙伴可以去看下哈。