html 表格插件 可拖动,Sortable.js实现可拖拽Table组件

目标

vue项目中实现一个可拖拽的Table组件，并保存拖拽后的顺序

安装Sortable

$ npm install sortablejs --save

代码实现

创建DragableTable.vue文件，定义template和props

引入依赖

import Sortable from 'sortablejs';

定义table对象

data() {

return {

table: {

isDragging: false, // 是否正在被拖拽

oldIndex: 0, // 原索引

newIndex: 0, // 新索引

draggingRecord: [] // 拖拽记录

}

}

}

ref定位排序容器，Sortable.create初始化可排序对象，绑定onStart和onEnd事件

Sortable.create('id_of_container',[options]);

mounted() {

var el = this.$refs.table.$children[1].$el.children[1];

let vm = this;

Sortable.create(el, {

onStart: vm.handleOnstart,

onEnd: vm.handleOnend

});

}

定义handleOnStart和handleOnEnd方法，并抛出on-drag-chan