Vue.Draggable 是一个基于 Vue.js 的可拖拽组件库，可以帮助开发者快速实现拖拽排序等功能。本文将介绍如何使用 Vue.Draggable 进行开发。
安装
在项目中安装 Vue.Draggable 可以使用 npm，在命令行输入以下命令：
--- ------- ------------
基本用法
- 导入 Vue.Draggable 组件并注册
------ --------- ---- --------------
------ ------- -
----------- -
----------
--
-- 在模板中使用
----------
---------- ---------------
---- ------------- ------ -- ----- --------------- ---- --------
------------
-----------
--------
------ ------- -
------ -
------ -
----- ----- ---- -----
-
--
-
---------通过 v-model 绑定数据源，添加子节点作为列表项即可。
高级用法
拖拽范围限制
可以通过 group 属性指定同一组件的拖放范围，只有在同一组件内才能进行拖拽交互。
---------- --------------- --------------- ---- --- --- ------------ ---------- --------------- --------------- ---- --- --- ------------
拖拽样式定制
可以通过 element 属性指定拖动时使用的节点，通过 clone 属性指定是否使用克隆节点。
---------- --------------- --------------- -------------- --- ------------- ------ -- ------ --------------- ---- ------- ------------
拖拽事件处理
Vue.Draggable 提供了多个事件用于处理拖拽过程中的各种场景。在组件上绑定对应事件即可，如下是一些常见的事件：
start：拖拽开始时触发add：添加一个元素到列表中时触发update：移动一个元素到另一个位置时触发end：拖拽结束时触发
---------- --------------- ------------------ --------------- ---- --- --- ------------
-------- -
-------------- -
----------------- -------
--
------------ -
----------------- -----
--
-示例代码
以下是一个完整的示例代码，展示了通过 Vue.Draggable 实现的拖拽排序功能。
----------
-----
------- -- ---------
---------- --------------- --------------- ------------- -------------------
--- ------------- ------ -- ------ ----------------- ---------- -------
------------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
----------- -
----------
--
------ -
------ -
------ -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
--
-
--
-------- -
--------------- -
--------------------- ------
--
--
-
---------以上就是 Vue.Draggable 的使用教程，希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33684