vue2 拖动排序 vuedraggable组件的实现
作者:zxc19890923 时间:2024-05-02 16:59:08
一、安装插件
npm install -D vuedraggable
二、在需要排序的界面中引入组件
<script>
import draggable from 'vuedraggable'
export default {
name: 'HelloWorld',
components: {
draggable
},
三、在模板中使用
<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
<div v-for="(item, index) in groups" :key=index>
item {{item}}
</div>
</draggable>
四、实现change、start、end、move方法,v-model绑定的数据就是排序后的数据,可以传递给后台修改数据库数据
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event)
},
end (event) {
console.log('end', event, this.groups)
},
move (event, orgin) {
console.log('move', event, orgin)
}
}
五、完整代码,参考网址
<template>
<div>
排序
<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
<!-- <transition-group> -->
<div v-for="(item, index) in groups" :key=index>
item {{item}}
</div>
<!-- </transition-group> -->
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'HelloWorld',
components: {
draggable
},
data () {
return {
groups: [
1, 2, 3, 4, 5
]
}
},
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event)
},
end (event) {
console.log('end', event, this.groups)
},
move (event, orgin) {
console.log('move', event, orgin)
}
}
}
</script>
<style scoped>
</style>
https://github.com/SortableJS/Vue.Draggable
来源:https://segmentfault.com/a/1190000020004548
标签:vue2,拖动排序,vuedraggable
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python 异常处理Ⅳ过程图解
2023-06-28 16:05:53
![](https://img.aspxhome.com/file/2023/4/59474_0s.png)
Go语言学习笔记之golang操作MongoDB数据库
2024-01-27 05:06:23
![](https://img.aspxhome.com/file/2023/3/105823_0s.png)
ERROR 1222 (21000): The used SELECT statements have a different number of columns
2024-01-15 02:31:28
利用Pandas索引和选取数据方法详解
2023-04-30 23:30:07
![](https://img.aspxhome.com/file/2023/4/127924_0s.png)
JavaScript基本数据类型及值类型和引用类型
2024-05-10 13:59:39
php 字符串中是否包含指定字符串的多种方法
2023-06-11 20:21:38
python操作mysql、excel、pdf的示例
2024-01-14 17:43:27
![](https://img.aspxhome.com/file/2023/1/117331_0s.png)
php中json_decode()和json_encode()的使用方法
2023-06-11 16:31:56
layui-table表复选框勾选的所有行数据获取的例子
2024-04-28 10:19:05
![](https://img.aspxhome.com/file/2023/3/132693_0s.jpg)
使用Python监控文件内容变化代码实例
2021-06-05 22:45:19
vue-property-decorator用法详解
2024-05-29 22:49:55
栅格:从混乱到秩序
2008-07-02 12:09:00
![](https://img.aspxhome.com/file/UploadPic/20087/2/200872121218318s.gif)
FrontPage2002简明教程三:网页布局
2008-09-17 11:19:00
![](https://img.aspxhome.com/file/UploadPic/200810/17/2008101711222914s.jpg)
解决python将xml格式文件转换成txt文件的问题(xml.etree方法)
2021-10-21 02:51:13
![](https://img.aspxhome.com/file/2023/7/68957_0s.png)
最详细的python工具Anaconda+Pycharm安装教程
2022-01-15 10:20:30
![](https://img.aspxhome.com/file/2023/2/75262_0s.png)
貌似很强的mysql备份策略分享
2024-01-27 18:37:03
一次MySQL慢查询导致的故障
2024-01-21 12:18:17
![](https://img.aspxhome.com/file/2023/5/78095_0s.png)
如何在页面中对不同的数据进行相同的处理?
2010-06-26 12:30:00
JavaScript闭包详解
2024-04-19 10:06:52
![](https://img.aspxhome.com/file/2023/9/135909_0s.png)
推荐20家国外的脚本下载网站
2023-08-23 11:36:02
![](https://img.aspxhome.com/file/2023/2/55992_0s.jpg)