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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
Vue数据双向绑定原理实例解析
May 15 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
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
python图像处理之反色实现方法
2015/05/30 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
python使用folium库绘制地图点击框
2018/09/21 Python
python树莓派红外反射传感器
2019/01/21 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
找工作求职信
2014/07/07 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
业务内勤岗位职责
2015/04/13 职场文书
装修安全责任协议书
2016/03/22 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
使用Ajax实现无刷新上传文件
2022/04/12 Javascript