Vue.Draggable 是一个基于 Vue.js 的可拖拽组件库，可以帮助开发者快速实现拖拽排序等功能。本文将介绍如何使用 Vue.Draggable 进行开发。
安装
在项目中安装 Vue.Draggable 可以使用 npm，在命令行输入以下命令：
npm install vuedraggable基本用法
- 导入 Vue.Draggable 组件并注册
import draggable from 'vuedraggable' export default { components: { draggable, }, }
- 在模板中使用
-- -------------------- ---- ------- ---------- ---------- --------------- ---- ------------- ------ -- ----- --------------- ---- -------- ------------ ----------- -------- ------ ------- - ------ - ------ - ----- ----- ---- ----- - -- - ---------展开代码
通过 v-model 绑定数据源，添加子节点作为列表项即可。
高级用法
拖拽范围限制
可以通过 group 属性指定同一组件的拖放范围，只有在同一组件内才能进行拖拽交互。
<draggable v-model="list1" group="people"> <!-- 列表1 --> </draggable> <draggable v-model="list2" group="people"> <!-- 列表2 --> </draggable>
拖拽样式定制
可以通过 element 属性指定拖动时使用的节点，通过 clone 属性指定是否使用克隆节点。
<draggable v-model="list3" :element="'ul'" :clone="true"> <li v-for="(item, index) in list3" :key="index">{{ item }}</li> </draggable>
拖拽事件处理
Vue.Draggable 提供了多个事件用于处理拖拽过程中的各种场景。在组件上绑定对应事件即可，如下是一些常见的事件：
start：拖拽开始时触发add：添加一个元素到列表中时触发update：移动一个元素到另一个位置时触发end：拖拽结束时触发
<draggable v-model="list4" @start="dragStart" @end="dragEnd"> <!-- 列表4 --> </draggable>
methods: { dragStart(evt) { console.log('drag start') }, dragEnd(evt) { console.log('drag end') }, }
示例代码
以下是一个完整的示例代码，展示了通过 Vue.Draggable 实现的拖拽排序功能。
-- -------------------- ---- ------- ---------- ----- ------- -- --------- ---------- --------------- --------------- ------------- ------------------- --- ------------- ------ -- ------ ----------------- ---------- ------- ------------ ------ ----------- -------- ------ --------- ---- -------------- ------ ------- - ----------- - ---------- -- ------ - ------ - ------ - - --- -- ------ ----- -- -- - --- -- ------ ----- -- -- - --- -- ------ ----- -- -- - --- -- ------ ----- -- -- - --- -- ------ ----- -- -- -- - -- -------- - --------------- - --------------------- ------ -- -- - ---------展开代码
以上就是 Vue.Draggable 的使用教程，希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33684
