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新手语法小结
Jun 15 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
js实现右键弹出自定义菜单
Sep 08 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
Chrome Web App开发小结
2014/09/04 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
javascript的BOM
2016/05/03 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
深入解析Python中函数的参数与作用域
2016/03/20 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
银行先进个人事迹材料
2014/05/11 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
高中物理教学反思
2016/02/19 职场文书
python pygame入门教程
2021/06/01 Python