vue2 拖动排序 vuedraggable组件的实现


Posted in Javascript onAugust 08, 2019

一、安装插件

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 #Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 #Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 #Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 #Javascript
javascript实现blob加密视频源地址的方法
Aug 08 #Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 #Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
js选择器全面解析
2016/06/27 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
使用Python生成url短链接的方法
2015/05/04 Python
python实现12306火车票查询器
2017/04/20 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python Matplotlib模块的使用
2020/09/16 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
护士的岗位职责
2013/12/04 职场文书
设计师个人求职信范文
2014/02/02 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书