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列表拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章介绍了VUE中v-if与v-show的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
这篇文章主要介绍了Vue混入与插件的使用，mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等2022-09-09
这篇文章主要为大家介绍了vue3模块创建runtime-dom源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue双向绑定及观察者模式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
vue中如何给el-table-column添加指定列的点击事件
elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue 子组件更新props中的属性值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,下面这篇文章主要给大家介绍了关于用Vue基础语法来写一个五子棋小游戏的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了通过html文件来使用Vue的单文件组件形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了Vite结合Vue删除指定环境的console.log问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论