使用 VueDraggable 创建可拖拽列表的全面指南

在现代Web应用程序中，拖拽功能不仅增加了用户体验的互动性，还可以使页面元素的重新排序变得更加直观和有效。Vue.js 生态系统中的 vuedraggable 组件提供了一种简单而强大的方法来实现这一功能，结合了 Vue.js 和 Sortable.js 的优势，使得创建拖拽功能变得异常容易。本文将介绍如何使用 vuedraggable 实现单列拖拽、多列拖拽、表格拖拽，并解决拖入空数组时可能遇到的问题。

1. 安装和基本用法

首先，确保你的项目已经安装了 Vue.js 和 npm 包管理器。然后，安装 vuedraggable：

npm install vuedraggable

2. 单列拖拽示例

单列拖拽适用于简单的列表，比如一个垂直排列的项目列表。以下是一个基本的示例：

<template><div><draggable v-model="list" class="drag-container"><div v-for="item in list" :key="item.id">{{ item.name }}</div></draggable></div>
</template><script>
import draggable from 'vuedraggable';export default {components: {draggable,},data() {return {list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },// Add more items as needed],};},
};
</script><style>
.drag-container {display: flex;flex-direction: column;margin: 10px 0;
}
</style>

在上面的例子中，draggable 组件被用来包裹一个由 v-for 渲染出的项目列表。用户可以通过拖拽重新排列 list 数组中的项目，而 v-model="list" 实现了列表数据的双向绑定，保持了数据的同步更新。

3. 多列拖拽示例

多列拖拽界面，其中有多个列，每列包含不同的项目。下面是一个简单的多列拖拽示例：

<template><!--使用draggable组件--><div class="itxst"><div class="col"><div class="title">把下面元素拖拽到B组试试看</div><draggablev-model="arr1"group="site"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@start="onStart"@end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr1" :key="item.id">{{ item.name }}</div></transition-group></draggable></div><div class="col"><div class="title">B组（本组是个空数组）</div><draggablev-model="arr2"group="site"animation="100"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@start="onStart"@end="onEnd"><transition-group :style="style"><div class="item" v-for="item in arr2" :key="item.id">{{ item.name }}</div></transition-group></draggable></div></div>
</template><script>
import draggable from "vuedraggable";export default {components: {draggable,},data() {return {drag: false,arr1: [{ id: 1, name: "www.itxst.com" },{ id: 2, name: "www.jd.com" },{ id: 3, name: "www.baidu.com" },{ id: 4, name: "www.taobao.com" },],arr2: [],//空数组之在的样式，设置了这个样式才能拖入style: "min-height:120px;display: block;",};},methods: {onStart() {this.drag = true;},onEnd() {this.drag = false;},},watch:{arr1(val){console.log('🚀 ~ arr1 ~ val:', ...val)},arr2(val){console.log('🚀 ~ arr2 ~ val:', ...val)}}
};
</script><style>
.chosenClass {/* background-color: red !important; */opacity: 1 !important;
}.dragClass {/* background-color: blueviolet !important; */opacity: 1 !important;box-shadow: none !important;outline: none !important;background-image: none !important;
}.itxst {margin: 10px;
}.title {padding: 6px 12px;
}.col {width: 40%;flex: 1;padding: 10px;border: solid 1px #eee;border-radius: 5px;float: left;
}.col + .col {margin-left: 10px;
}
.item {padding: 6px 12px;margin: 0px 10px 0px 10px;border: solid 1px #eee;background-color: #f1f1f1;
}.item:hover {background-color: #fdfdfd;cursor: pointer;
}.item + .item {border-top: none;margin-top: 6px;
}
</style>

4. 表格拖拽示例

有时候我们需要在表格中进行拖拽排序，例如调整表格中行的顺序。vuedraggable 也能很好地处理这种情况：

<template><table class="table"><tbody><draggable v-model="rows" tag="tbody"><tr v-for="row in rows" :key="row.id"><td>{{ row.id }}</td><td>{{ row.name }}</td></tr></draggable></tbody></table>
</template><script>
import draggable from 'vuedraggable';export default {components: {draggable,},data() {return {rows: [{ id: 1, name: 'Row 1' },{ id: 2, name: 'Row 2' },{ id: 3, name: 'Row 3' },// Add more rows as needed],};},
};
</script><style>
.table {width: 100%;border-collapse: collapse;
}.table td, .table th {border: 1px solid #ddd;padding: 8px;text-align: left;
}.table th {background-color: #f2f2f2;
}
</style>

在这个例子中，draggable 组件直接包裹了 tbody，并且使用 tag="tbody" 属性指定了要拖动的元素标签类型。这样做可以保证在表格中拖拽行时，DOM 结构保持正确。

5. 拖入空数组的问题

使用 vuedraggable 时，有时会遇到将项目拖入一个空数组的情况。默认情况下，vuedraggable 并不会自动添加项目到空数组中，这可能会导致一些预期之外的行为。解决这个问题的一个方法是，在 draggable 组件中使用 clone 属性。例如：

<draggable v-model="list" :clone="cloneItem" class="drag-container"><!-- List items -->
</draggable>

在 Vue 实例中，需要定义 cloneItem 方法：

methods: {cloneItem(item) {return { ...item }; // Clone the item to avoid mutating original data},
}

这样做可以确保当用户将项目拖入空数组时，会自动克隆原始项目，从而避免直接修改源数据，同时也保证了正常的拖拽行为。

结论

通过 vuedraggable，我们可以轻松实现单列拖拽、多列拖拽和表格拖拽等功能，大大提升了用户界面的互动性和用户体验。同时，注意处理拖入空数组的问题也是使用这个组件时需要注意的一点。希望本文能帮助你更好地理解和使用 vuedraggable 组件，为你的 Vue.js 应用程序增添更多交互功能。