目标
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