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中全局限制输入特殊字符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家详细介绍了vue的watch和watchEffect，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
在Vue 3中,getCurrentInstance是一个用于获取当前组件实例的重要函数,以下是对getCurrentInstance的详细分析,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要介绍了Vue加载json文件的方法,结合实例形式分析了vue.js针对json文件的加载及数据读取等相关操作技巧,需要的朋友可以参考下2019-01-01
详谈Object.defineProperty 及实现数据双向绑定
这篇文章主要介绍了详谈Object.defineProperty 及实现数据双向绑定，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue与iframe之间的交互方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue-element-admin平台侧边栏收缩控制问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue 中使用print.js导出pdf操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论