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 相关文章推荐
javascript 节点排序 2
Jan 31 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
应届生人事助理求职信
2013/11/09 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
应届大专生自荐书
2014/06/16 职场文书
毕业生党员个人总结
2015/02/14 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
详解如何用Python实现感知器算法
2021/06/18 Python
python​格式化字符串
2022/04/20 Python