使用sortablejs复原上次移动

今天有一个功能:在element-ui的table中移动行时,发现不符合移动条件,需要恢复到移动前的样子。官方文档中没有撤销操作的api。于是只能自己找办法,最后在github中找到了一个解决办法。https://github.com/SortableJS/Sortable/issues/837#issuecomment-894882604
最后代码如下:分别复原数据和dom

     // 在Sortable.create的onEnd回调函数中添加代码
     onEnd(evt) {
         const list = tableData;
         const oldIndex = evt.oldIndex;
         const newIndex = evt.newIndex;
         // 拖拽之后改变数据
         const oldItem = list.splice(oldIndex, 1)[0];
         list.splice(newIndex, 0 , oldItem);
         // 拖拽之后改变数据结束
         if (...需要复原的条件) {
             // 复原拖拽之前的 数据
             const item = list.splice(newIndex, 1)[0];
             list.splice(oldIndex, 0, item);
             // 复原拖拽之前的 dom
             const tagName = evt.item.tagName;
             const items = evt.from.getElementsByTagName(tagName);
             if (evt.oldIndex > evt.newIndex) {
               evt.from.insertBefore(evt.item, items[evt.oldIndex+1]);
             } else {
               evt.from.insertBefore(evt.item, items[evt.oldIndex]);
             }
         }
       }
     }

你可能感兴趣的:(使用sortablejs复原上次移动)