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高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
Vue实现简单购物车功能
Dec 13 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
PHP 断点续传实例详解
2017/11/11 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
python文件和目录操作函数小结
2014/07/11 Python
python随机生成指定长度密码的方法
2015/04/04 Python
简单解析Django框架中的表单验证
2015/07/17 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python数据结构之链表的实例讲解
2017/07/25 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
类和结构的区别
2012/08/15 面试题
帮一个朋友写的求职信
2014/08/09 职场文书
2014年政协工作总结
2014/12/09 职场文书
邀请函模板
2015/02/02 职场文书
工会积极分子个人总结
2015/03/03 职场文书
同意报考公务员证明
2015/06/17 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server