elementUI Table组件实现拖拽效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26440803/article/details/83663511

背景

使用

Element UI Table

+

Vue

实现表格的拖拽。在

GitHub

上搜索了下发现Sortable这款插件挺不错的，

Star14000+

，而且还支持Vue等多种主流的前端框架，可谓是十分的强大。最重要的原因是，完全不依赖

JQ

。

Vue.Draggable，

Vue

版本的

Sortable

。拖拽后能够使数据模型同步，完美兼容Vue的数据视图双向绑定。

下面贴一下官方demo

看得出来真的很强大。数据实时的响应同步，结合Vue我们根本不需要对数据进行复杂的逻辑处理。

准备

• 安装依赖

npm i -S vuedraggable

vuedraggable

依赖 Sortable.js，所以下载了

vuedraggable

，我们便可以直接引入

Sortable

使用

Sortable

的特性。

vuedraggable

是

Sortable

一种加强，实现组件化的思想，可以结合Vue，使用起来更方便。

• Sortable使用

  在这里我们还是使用一句

  Sortable

  的构建方式

  import Sortable from 'sortablejs';

  导入

  Sortable

  类，创建拖拽函数

  drag() {
  const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
  Sortable.create(el, {
  disabled: !this.enableDrag,
  ghostClass: 'sortable-ghost',
  setData: function(dataTransfer) {
  dataTransfer.setData('Text', '');
  },
  onEnd: (evt) => {
  
  }
  });
  },

  我们在数据加载完成之后，就调用drag()方法来开启拖拽功能。
  介绍下几个参数的作用：

  el

  代表我们要侦听拖拽响应的

  dom

  对象

• disabled

  是否开启拖拽

• ghostClass

  拖拽时可以给加上样式

• setData

  回调HTML5 DragEvent的dataTransfer`对象，来设置显示的数据

• onEnd

  结束拖拽后的回调函数，

  evt

  包含

  oldIndex

  ，

  newIndex

  等一系列属性。

  完整属性列表

演示

阅读更多