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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
canvas绘制七巧板
Feb 03 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
利用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
关于时间计算的结总
2006/12/06 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python列表切片常用操作实例解析
2019/12/16 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
师德演讲稿范文
2014/05/06 职场文书
技术比武方案
2014/05/19 职场文书
教师专业自荐信
2014/05/31 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
MongoDB使用场景总结
2022/02/24 MongoDB
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python