项目介绍

Vue.js 一个前端框架， 地址： https://github.com/vuejs/vue
Sortable.js 一个用于拖拽的JS插件，地址： https://github.com/RubaXa/Sortable

项目使用细节

本省Vue单纯的支持列表什么的是没有毛病的，比如下面的代码例子，运行截图就不了，这里都是手写的伪代码而已，或许根本跑不起来

1. Vue JS

   let app = new Vue({
       el: '#app',
       data: {
           list: [
               { id: "A_1", text: "A1" },
               { id: "A_2", text: "A2" }
           ]
       },
       methods: {
           updateListSort: function (newSort) {
               //...sort....假设这里你完成了排序
               let newSortList = [];
               this.list = newSortList;
           }
       }
   })

2. Vue HTML

   <div id="app">
       <div id="Group1">
           <div v-for="item in list" :data-id="item.id" class="d-hander">
               <span>{{item.text}}</span>
           </div>
       </div>
   </div>

3. Sortable 代码部分

   let el = document.getElementById('Group1');
   let sortable = Sortable.create(el, {
       group: "GroupName",
       handle: ".d-hande",
       draggable: ".d-hande",
       dataIdAttr: "data-id",
       onUpdate: function () {
           let sortArray = sortable.toArray();
           app.updateListSort(sortArray);
       }
   });

出现的问题及解决

从上面的代码看起来，几乎找不到太大的问题，预想中的就是这样一定会完成，实际情况并没有那么美好。

• 出现的问题：
  1. 如果去掉更新事件，看起来很正常，但是Vue的数组不会更新，这里是由于这个拖拽插件不支持Vue.js导致的
  2. 如果设置更新，则会发现拖拽的时候有一定的几率出现更新不成功，而且这个几率很大，甚至有时候更新是错误的，导致列表混乱。这就很严重了。
• 解决方案
  1. 换一个插件，其他插件怎么样不太懂，JS用得少，更何况Vue这个，所以不现实。即使换了也不一定有效。
  2. 调整更新逻辑，方案只有这一个，至于怎么更新列表，尝试就比较多了。

列表更新的尝试

1. 拖住对象销毁法
   这个方案不靠谱，起源在于列表更新异常在于两者之间的冲突导致，而实际上是由于Vue之间维护Dom对象导致的问题，如果需要具体知道为什么，可以去翻看Vue相关的源码，总能找到些内容，所以针对这个排序插件的销毁几乎起不到作用，反而导致事情的复杂化。

2. 列表对象销毁法
   这里方案就比较靠谱了，不管排序的对象，我拿到新的排序后将现有的列表直接销毁，然后在下一阶段重建排序列表，这样即使有冲突也不存在相关问题了，可以说完美解决。只是性能如何就不得而知了，当然我并没有那么在乎这个性能的问题。毕竟不是在APP上的开发。

改进的Vue代码

最后的最后

回想看看，实际的解决方案都是很简单的，只是开开始的时候想了很多稀奇古怪的招式，导致整个过程变得很复杂和艰难。实际上这是第二次遇到这个问题，最终解决了，虽然不是那么完美。