vuedraggable 是一个基于 Vue 的拖拽排序组件，它可以让你轻松地在 Vue 应用中实现拖拽排序功能。vuedraggable 底层是基于 Sortable.js 实现的，它支持排序、拖拽、交换等操作。
安装 vuedraggable
-
通过 npm 安装
如果你使用的是 npm，可以通过以下命令安装
vuedraggable：npm install vuedraggable -
通过 CDN 引入
如果你不想使用 npm，可以直接通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>
基本用法
以下是一个简单的 vuedraggable 使用示例，展示了如何在 Vue 组件中实现一个可拖拽排序的列表。
示例 1：基本的拖拽排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vuedraggable 示例</title>
</head>
<body>
<div id="app">
<draggable v-model="items" :group="{ name: 'items' }" :animation="200">
<div v-for="item in items" :key="item.id" class="item">
{{ item.name }}
</div>
</draggable>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
],
};
},
});
app.mount("#app");
</script>
</body>
</html>
代码解释：
v-model="items"：将组件的数据与父组件绑定。在此案例中，items是一个数组，存储了所有的列表项。:group="{ name: 'items' }"：指定拖拽排序的组。如果你有多个draggable列表，并希望它们之间能够拖拽排序，可以使用group来指定组。:animation="200"：设置拖拽时的动画效果，单位为毫秒。
进阶用法
示例 2：实现多个列表的拖拽排序（跨列表拖拽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vuedraggable 示例</title>
</head>
<body>
<div id="app">
<div class="list-container">
<div class="list">
<h3>List 1</h3>
<draggable v-model="list1" :group="{ name: 'items', pull: 'clone', put: true }">
<div v-for="item in list1" :key="item.id" class="item">
{{ item.name }}
</div>
</draggable>
</div>
<div class="list">
<h3>List 2</h3>
<draggable v-model="list2" :group="{ name: 'items', pull: false, put: true }">
<div v-for="item in list2" :key="item.id" class="item">
{{ item.name }}
</div>
</draggable>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
list1: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
],
list2: [
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
],
};
},
});
app.mount("#app");
</script>
<style>
.list-container {
display: flex;
gap: 20px;
}
.list {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
.item {
padding: 5px;
margin: 5px;
background-color: #f0f0f0;
cursor: pointer;
}
</style>
</body>
</html>
代码解释：
- 在这个例子中，我们有两个列表
list1和list2，并使用了vuedraggable来使得它们之间能够实现拖拽排序。 pull: 'clone'表示你可以从list1拖动项目并将其克隆到目标列表（list2）。put: true允许你将项目放入目标列表。pull: false表示不允许从list2拖动项目到list1。
常用属性和事件
-
v-model：用于双向绑定拖拽的数据。 -
group：指定拖拽的组，支持name,pull,put属性。name: 同一组的列表可以相互拖拽。pull: 定义该列表是否可以拖动元素到其它列表（clone代表克隆元素）。put: 定义该列表是否允许接收元素。
-
animation：设置拖拽时的动画效果，单位为毫秒。 -
disabled：禁用拖拽功能。 -
ghostClass：设置拖拽过程中元素的 CSS 类。
事件：
@start：拖动开始时触发。@end：拖动结束时触发。@change：拖动排序完成时触发。
