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限制文本输入框只允许输入字母、数字、不允许输入特殊字符,通过监听表单输入的内容,使用方法的缺陷,本文通过实例代码介绍的非常详细,需要的朋友参考下吧2023-10-10
目前大多数PC端应用都有配套的移动端APP，如微信，淘宝等，通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录，使得用户登录操作更方便，安全，快捷，这篇文章主要介绍了Vue PC端如何实现扫码登录功能,需要的朋友可以参考下2023-01-01
本篇文章主要介绍了详解使用vuex进行菜单管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了WebSocket使用以及在vue如何使用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
详解element上传组件before-remove钩子问题解决
这篇文章主要介绍了详解element上传组件before-remove钩子问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
在web端,lottie-web库可以解析导出的动画json文件,并将其以svg或者canvas的方式将动画绘制在我们的页面上,这篇文章主要介绍了vue使用lottie-web实现web动画,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue-resourc发起异步请求的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue自定义穿梭框支持远程滚动加载,iview是全局注入，基本使用原先的类名进行二次创建公共组件，修改基础js实现逻辑，本文结合实例代码介绍的非常详细，需要的朋友可以参考下2023-08-08
将Vue3项目打包、编写Dockerfile、构建Docker镜像和运行容器是部署Vue3项目到Docker的主要步骤,这篇文章主要介绍了前端Vue3项目打包成Docker镜像运行的详细步骤,需要的朋友可以参考下2024-09-09
关于@click.native中 .native 的含义与使用方式
这篇文章主要介绍了关于@click.native中 .native 的含义与使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论