vue 的原则是操作数据, 控制 dom, 可是 sortable 直接操作了 dom.
我们要做的思路就是当 sortable 操作 dom 的时候还原操作.
保持数据的一致性!
- data(){
- return {
- sortList: ['a','b','c','d']
- }
- }
1. 新增
- onRemove(event) {
- // 新增节点的任务交给 vue 处理数据
- this.sortList.splice(event.newIndex,0,'e');
- // 删除拖拽后 dom 节点
- event.item.parentNode.removeChild(event.item);
- },
2. 删除
- onFilter(event) {
- // 已经删除了 dom 节点, 直接操作对应的 vue 数据即可
- this.sortList = this.sortList.filter((item) => {
- return item != 'a';
- })
- }
3. 排序
- onUpdate(event){
- // 还原 dom 的移动操作
- let newIndex = event.newIndex,
- oldIndex = event.oldIndex,
- $ul = event.item.parentElement,
- $li = $ul.children[newIndex],
- $oldLi = $ul.children[oldIndex]
- // 先删除移动的节点
- $ul.removeChild($li);
- // 再插入移动的节点到原有位置
- if(newIndex> oldIndex) { // 判断向上移动还是向下移动
- $ul.insertBefore($li,$oldLi)
- } else {
- $ul.insertBefore($li,$oldLi.nextSibling)
- }
- // 操作 vue 数据
- let item = this.sortList.splice(event.oldIndex,1);
- this.sortList.splice(event.newIndex,0,item[0]);
- }
来源: http://www.qdfuns.com/article/18483/79c21e79a07a032beae2660c4f86a0c7.html