vue2 拖动排序 vuedraggable组件的实现
作者:zxc19890923 发布时间:2024-05-02 16:59:08
标签:vue2,拖动排序,vuedraggable
一、安装插件
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


猜你喜欢
- 废话不多说,直接开干!抖音字符视频在今年火过一段时间。反正我是始终忘不了那段刘耕宏老师本草纲目的音乐…这一次自己也来实
- 一 引入jwtjwt用户身份验证go get github.com/dgrijalva/jwt-go二 框架中引入jwtimport (&q
- 本文实例讲述了python实现自动重启本程序的方法。分享给大家供大家参考。具体实现方法如下:#!/usr/local/bin/python#
- 下面是十个Python中很有用的贴士和技巧。其中一些是初学这门语言常常会犯的错误。注意:假设我们都用的是Python 31. 列表推导式你有
- 本文实例讲述了Python实现基于socket的udp传输与接收功能。分享给大家供大家参考,具体如下:udp的传输与接收windows网络调
- 1.单继承父类也叫基类子类也叫派生类如下所示,继承的关系:继承的书写格式:class 子类(父类):方法实例:class Animal: &
- User Centered Design 以用户为中心的设计,一说到这个很多人马上想到互联网和软件的设计,因为在IT、互联网行业提得最多。其
- 逻辑判断内容滚动到底需要知道的信息内容区域的真实高度(也就是滚动区域)滚动条距离顶部的位置内容区域的可见高度分别对应下面的三个API。ele
- 译者newstart写的简介:Ross Dawson所在的Future Exploration Network于2007年5月发布的web2
- 前言在本文中,我们将介绍10个示例,以掌握如何使用用于Python的Seaborn库创建图表。任何数据产品的第一步都应该是理解原始数据。对于
- Java开发者对于面向对象编程思维与命令行编程思维的协调程度,取决于他们如下几种能力的水平:技巧(任何人都可以编写命令行形式的代码)教条(有
- 只能远程协助的方式。我特意做了一个脚本,用电话指导客户在SSMS里执行一下脚本就可以了1.0的数据库跟1.1的数据库的区别是1.1的数据库里
- 听说有个面试题是: 如何快速向mysql中插入1000w条数据?我私下试了一下, 发现插入10000条数据用了0.9s, 插入10w条数据用
- 以该网站为例:https://www.17sucai.com/pins/demo-show?id=5926该网页下存在多个可供测试的下拉框。
- 目录友情提示:性能优化指标数据库查询优化利用Queryset的惰性和缓存,避免重复查询一次查询所有需要的关联模型数据仅查询需要用到的数据使用
- 1、最近公司实现部分数据统计、分析的报表进行每天定时发送到相关人员的邮箱之中的配置代码被人为删除了,需要重新恢复该功能,由于原先是在linu
- V5.0之后,我们总结了一些得失。首先要说的是改版的动力。产品设计或产品升级的驱动力只有两个:用户需求和网站目标。之前的我们的多次改版,其驱
- 导读只需要添加几行代码,就可以得到更快速,更省显存的PyTorch模型。你知道吗,在1986年Geoffrey Hinton就在Nature
- OpenCVOpenCV 是计算机视觉领域最受欢迎的开源库,起初它由 C/C ++ 编写,现在用 Python 也能使用。OpenCV 可以
- 在常见的pytorch代码中,我们见到的初始化方式都是调用init类对每层所有参数进行初始化。但是,有时我们有些特殊需求,比如用某一层的权重