Vue + element ui table 实现拖拽
源代码
地址:https://registry.npmjs.org/sortablejs/-/sortablejs-1.13.0.tgz
使用
1、引入
import Sortable from 'sortablejs';
2、创建
imageSort(){
const _node = this.$el.querySelector('.el-upload-list .el-upload-list--picture-card');
const _this = this;
_this.sort = Sortable.create(_node, {
handle: '.drag',
onEnd({ newIndex, oldIndex }) {
const currRow = _this.form.screenShotCovers.splice(oldIndex, 1)[0];
_this.form.screenShotCovers.splice(newIndex, 0, currRow);
}
});
},
3、调用
this.$nextTick(() => {
that.imageSort();
});
4、注销
sortDestroy() {
if (this.sort) {
this.sort.destroy();
this.sort = null;
}
},
5、html注入
<ul class=".el-upload-list .el-upload-list--picture-card">
<li class="drag">
...
</ul>