vue 中使用 sortable 库拖拽列表

sortable.js 可以实现对 dom 的拖放排序，在 vue 中，往往更新的 dom 后，数据也要排序。同步更新。这时，由于 vnode diff 算法的作用，数据变化又会更新 dom，使 sortable 拖动『失效』。解决办法是，拖放后，还原 dom 的变化，使用 vue 更新 dom 的机制。

  <ul class="ul">
       <li v-for="(item, index) in testArr" :key="item.id" class="li">
           <div>
              <span>{{index + 1}}</span>
               <span>{{item.title}}</span>
           </div>
      </li>
  </ul>

    mounted() {
        const $ul = document.querySelector('.ul');
        Sortable.create($ul, {
            onEnd: evt => {
                const {oldIndex, newIndex} = evt;
                const arr = this.testArr,
                    oldItem =arr[oldIndex],
                    newItem = arr[newIndex];

                const $lis = $ul.children,
                    $li = $lis[newIndex],
                    $oldLi = $lis[oldIndex];

                // 先删除移动的节点
                $ul.removeChild($li);
                // 再插入移动的节点到原有节点，还原了移动的操作
                if (newIndex > oldIndex) {
                    $ul.insertBefore($li, $oldLi);
                } else {
                    $ul.insertBefore($li, $oldLi.nextSibling);
                }

                this.$set(arr, oldIndex, newItem);
                this.$set(arr, newIndex, oldItem);
            }
        });
    },