vue使用vuedraggable对列表进行拖拽排序
作者：前端太佬
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：拖动排序完成时触发。
到此这篇关于vue使用vuedraggable对列表进行拖拽排序的文章就介绍到这了,更多相关vue vuedraggable列表拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！