在前端开发中，我们经常需要实现列表、表格或其它类型的组件拖拽排序。这种交互行为在一些场景下非常常见，但是实现起来稍有难度，如果每次都需要自己从头开始写，将会浪费大量的精力。为了解决这个问题，我们可以使用 @dragndrop/vue-draggable 包来快速实现拖拽排序效果。
什么是 @dragndrop/vue-draggable？
@dragndrop/vue-draggable 是一个基于 Vue.js 的拖拽排序组件。它是基于 Sortable.js 封装的，提供了对 Vue.js 的支持。Sortable.js 是一个用来支持拖拽排序的 JavaScript 插件，它易于使用、高度可定制，并且具有良好的性能。
配置和使用
安装 @dragndrop/vue-draggable
在使用 @dragndrop/vue-draggable 前，我们需要先将它安装到项目中，可以使用如下的命令进行安装：
npm install @dragndrop/vue-draggable
引入 @dragndrop/vue-draggable
在使用 @dragndrop/vue-draggable 前，我们还需要将其引入到项目中，可以使用如下的方式进行引入：
import draggable from '@dragndrop/vue-draggable';
Vue.component('draggable', draggable);使用示例
在使用 @dragndrop/vue-draggable 时，我们需要传入一个数组作为数据源，并在其中添加一个 v-for 指令来生成对应的列表项。此外，我们还需要在组件上添加 v-model 指令，这样就可以双向绑定列表的数据了。详细使用方式可以参考如下代码示例：
-- -------------------- ---- -------
----------
-----
---------- -------------- -------------------
---- ------------- ------ -- ----- -------------- -------------
-------------
------
------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
--
-------- -
---------- ----
--
--
--
--
---------
-------
----- -
------ ------
------- -----
------------ -----
----------- -------
------- --- ----- -----
------- -----
-
--------组件属性
| 属性名称 | 属性类型 | 默认值 | 是否必填 | 属性描述 |
|---|---|---|---|---|
| value | Array | [] | 是 | 组件数据源 |
| options | Object | { animation: 150 } | 否 | Sortable.js 的配置项，用于自定义拖拽排序组件的行为，具体配置方式可以参考 Sortable.js 的官方文档 |
扩展功能
@dragndrop/vue-draggable 提供了丰富的 API，可以满足我们在实现拖拽排序组件时的各种需求。在使用扩展功能时，我们需要在组件上使用 ref 属性，并通过 $refs 来调用相应的 API。
getModels()
getModels() 方法用于获取当前组件的数据源，并返回一个数组，数组的每一项表示一个列表项的数据。该 API 适用于需要对列表项数据进行更新或处理的场景。
let models = this.$refs.draggable.getModels();
setModels(models)
setModels(models) 方法用于更新当前组件的数据源。该 API 适用于需手动更新数据源的场景，例如通过接口获取新数据时使用。
this.$refs.draggable.setModels(newModels);
destroy()
destroy() 方法用于销毁当前组件的实例。该 API 适用于需要销毁组件实例的场景，例如路由切换时使用。
this.$refs.draggable.destroy();
总结
通过上述的学习，我们了解了 @dragndrop/vue-draggable 包的基本使用和属性配置，并且还学习了如何通过调用 API 扩展其功能。希望本文对大家学习前端拖拽排序组件的实现有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111835