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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
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
第五节--克隆
2006/11/16 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js三种排序算法分享
2012/08/16 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
node 版本切换的实现
2020/02/02 Javascript
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python文件名和文件路径操作实例
2017/09/29 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
投标邀请书范文
2014/01/31 职场文书
我的画教学反思
2014/04/28 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python字典的元素访问实例详解
2021/07/21 Python
基于redis+lua进行限流的方法
2022/07/23 Redis