sortable+element 实现表格行拖拽的方法示例


Posted in Javascript onJune 07, 2019

背景

1、vue项目中的表格需要实现行拖拽功能

2、表格使用element组件库中el-table

方案介绍

Sortable.js

介绍:Sortable.js是一款轻量级的拖放排序列表的js插件

引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

参考地址: https://github.com/SortableJS/Sortable

vuedraggable
介绍:基于Sortable.js的vue组件,用以实现拖拽功能

引用自官方文档:Vue drag-and-drop component based on Sortable.js

参考地址: https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中,发现必须用<draggable></draggable>包裹拖动项的父级元素,但是element组件库对table进行封装,无法直接包裹拖动项(即tr)的父级元素

如果你的项目中,表格未使用组件库,实现可以参考 https://3water.com/article/162648.htm

解决方案

使用 sortable.js

步骤一: 安装

npm install vuedraggable

步骤二:引入

import Sortable from 'sortablejs';

@Component({
 components: {
  Sortable
 }
})

步骤三: el-table 添加row-key属性

<el-table
 ref="filterTable"
 row-key="ip" 
 @filter-change="handlerFilterChange" 
 class="cl-table" 
 :data="resourceList" 
 v-loading="resourceListLoading" 
 stripe style="width:100%;">
 <el-table-column
   prop="name"
  label="主机名" 
  :min-width="150" 
  show-overflow-tooltip>
 </el-table-column>
 </el-table>

步骤四 : 将拖拽元素设置为要拖动项的父级元素

mounted() {
   // 表格中需要实现行拖动,所以选中tr的父级元素
  const table = document.querySelector('.el-table__body-wrapper tbody')
  const self = this
  Sortable.create(table, {
   onEnd({ newIndex, oldIndex }) {
    console.log(newIndex, oldIndex)
    const targetRow = self.resourceList.splice(oldIndex, 1)[0]
    self.resourceList.splice(newIndex, 0, targetRow)
   }
  })
 }

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

Javascript 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
如何编写高质量JS代码
Dec 28 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 #Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python脚本实时处理log文件的方法
2016/11/21 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python 图片去噪的方法示例
2019/07/09 Python
python实现日志按天分割
2019/07/22 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
python 对xml解析的示例
2021/02/27 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
法律专业求职信
2014/05/24 职场文书
导航工程专业自荐信
2014/09/02 职场文书
庆六一宣传标语
2014/10/08 职场文书
python之基数排序的实现
2021/07/26 Python