vue.draggable实现表格拖拽排序效果


Posted in Javascript onDecember 01, 2018

本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下

主要使用vuedraggable和sortablejs两个组件。

1、安装组件

npm install vuedraggable
npm install sortablejs

2、引入组件

import draggable from 'vuedraggable';
import Sortable from 'sortablejs';

export default {
  components: {
    draggable,
    Sortable
  },
  ....

3、HTML

我的例子是给表格排序,项目整体使用的是ivew,所以用了ivew的栅格来画表格

<Row class="draggableTable-head">
  <Col span="1">序号</Col>
  <Col span="2">商品条码</Col>
  <Col span="3">商品名称</Col>
  <Col span="1">单位</Col>
</Row>
<draggable class="list-group" v-model="tableData" :options="{draggable:'.rows'}"
  :move="getdata" @update="datadragEnd">
  <Row class="rows" v-for="(item,index) in tableData" :key="index">
    <Col span="1">
      <div class="cell">{{index+1}}</div>
    </Col>
    <Col span="2">
      <div class="cell">{{item.barCode}}</div>
    </Col>
    <Col span="2">
      <div class="cell">{{item.name}}</div>
    </Col>
    <Col span="2">
      <div class="cell">{{item.unit}}</div>
    </Col>
  </Row>
</draggable>

options中draggable的值是拖动的class。一开始怎么都不能拖动,加上这个就可以了。

4、两个方法

move:拖动中
update:拖拽结束

getdata (data) {
  // console.log('getdata方法');
},
datadragEnd (evt) {
  // console.log('datadragEnd方法');
  console.log('拖动前的索引 :' + evt.oldIndex)
  console.log('拖动后的索引 :' + evt.newIndex)
}

表格的处理逻辑是:
1、当前行的id和排序号作为参数,调用后台更改顺序的方法
2、不论调用成功与否,都重新渲染表格数据

【注意】如果有分页,那么传给后台的排序号就要再加上之前的条数,即(页码-1)*每页条数

Vue.Draggable作者的git地址

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

Javascript 相关文章推荐
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Angular短信模板校验代码
Sep 23 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 #Javascript
Vue组件Draggable实现拖拽功能
Dec 01 #Javascript
BootStrap modal实现拖拽功能
Dec 01 #Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
You might like
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
显示、隐藏密码
2006/07/01 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python编程实现希尔排序
2017/04/13 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
迟到检讨书400字
2014/01/13 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
霸气队列口号
2014/06/18 职场文书
文案策划专业自荐信
2014/07/07 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学工作总结2015
2015/05/04 职场文书
工程质量保证书
2015/05/09 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
A22国内电台短波广播频率表
2022/05/10 无线电
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技