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 不能释放内存.
Sep 07 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
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
神族 PROTOSS 概述
2020/03/14 星际争霸
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
详解js异步文件加载器
2016/01/24 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
原生js实现简单的链式操作
2017/07/04 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python实现rest请求api示例
2014/04/22 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
举例说明类变量和实例变量的区别
2016/06/30 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
珍惜水资源建议书
2014/03/12 职场文书
小学老师寄语大全
2014/04/04 职场文书
在校证明模板
2015/06/17 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL