前言
在前端开发中，拖拽排序是一个比较常见的需求，例如在一个列表中，用户可以通过拖拽来改变项目的顺序。Vue.js 是一个流行的前端框架，它提供了许多方便的工具和插件来帮助我们实现这样的需求。其中，vue-draggable 是一个非常好用的拖拽排序插件，本文将介绍如何在 Vue.js 中使用 vue-draggable 来实现拖拽排序。
安装 vue-draggable
首先，我们需要安装 vue-draggable。可以通过 npm 或 yarn 来安装：
npm install vuedraggable --save
或
yarn add vuedraggable
使用 vue-draggable
安装完成后，在 Vue.js 组件中引入 vue-draggable：
import draggable from 'vuedraggable'
然后，在组件的 template 中使用 draggable 组件：
<draggable v-model="list">
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
</draggable>这里的 v-model 绑定了一个名为 list 的数组，这个数组中的元素会被渲染成一个个 div 元素。注意，每个元素都需要有一个唯一的 key 属性，这样 vue-draggable 才能正确地追踪每个元素的位置。
现在，我们已经实现了一个基本的拖拽排序功能。用户可以通过拖拽列表中的元素来改变它们的位置，vue-draggable 会自动更新绑定的数组。
高级用法
除了基本的拖拽排序功能，vue-draggable 还提供了许多高级用法，例如限制拖拽的范围、自定义拖拽元素的样式、禁用某些元素的拖拽等。下面我们来逐一介绍这些用法。
限制拖拽范围
有时候，我们希望用户只能在列表的某个区域内拖拽元素，而不是整个页面。vue-draggable 提供了一个 containment 属性来实现这个功能。例如，我们可以将 containment 设置为一个 CSS 选择器，来限制拖拽的范围：
-- -------------------- ---- ------- ---------- -------------- ------------------------- ---- ----------- -- ----- ----------------- --------- -------- ------------ ------- ---------- - ------ ------ ------- ------ ------- --- ----- ----- - --------
这里的 containment 属性将拖拽范围限制在了一个宽高为 500px 的容器内。
自定义拖拽元素的样式
默认情况下，vue-draggable 会将拖拽的元素复制一份，并在原位置显示一个占位符。如果我们希望自定义拖拽元素的样式，可以使用 slot-scope 插槽来实现。例如，我们可以将拖拽元素改为一个带有样式的 div：
<draggable v-model="list">
<template slot-scope="{ item }">
<div :style="{ backgroundColor: item.color }">{{ item.text }}</div>
</template>
</draggable>这里的 slot-scope 插槽可以获取到当前拖拽的元素，我们可以根据它的属性来自定义元素的样式。
禁用某些元素的拖拽
有时候，我们希望某些元素不能被拖拽，可以使用 draggable 属性来实现。例如，我们可以将列表中的第一个元素禁用拖拽：
<draggable v-model="list">
<div v-for="(item, index) in list" :key="item.id" :draggable="index !== 0">{{ item.text }}</div>
</draggable>这里的 draggable 属性将第一个元素的拖拽禁用了。
示例代码
下面是一个完整的示例代码，演示了如何使用 vue-draggable 实现拖拽排序：
-- -------------------- ---- -------
----------
---- ------------------
---------- -------------- -------------------------
--------- ------------- ---- ---
---- --------- ---------------- ---------- ----- --------- --------
-----------
------------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
----------- -
---------
--
------ -
------ -
----- -
- --- -- ----- ----- --- ------ ----- --
- --- -- ----- ----- --- ------ ------- --
- --- -- ----- ----- --- ------ ------ --
- --- -- ----- ----- --- ------ -------- -
-
-
-
-
---------
-------
---------- -
------ ------
------- ------
------- --- ----- -----
-
--------总结
使用 vue-draggable 可以非常方便地实现拖拽排序功能。除了基本的拖拽排序，vue-draggable 还提供了许多高级用法，例如限制拖拽范围、自定义拖拽元素的样式、禁用某些元素的拖拽等。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e986e95b1f8cacd7b1f1c