当前位置： 移动技术网 > IT编程>网页制作>CSS > elementUITable组件实现拖拽效果

elementUITable组件实现拖拽效果

2018年11月25日  | 移动技术网IT编程  | 我要评论
elementui table实现拖拽效果

背景

使用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等一系列属性。

完整属性列表

演示

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网