今天有朋友说做一个效果：vue实现拖拽排序，必须勾选，输出结果排序，全选，不勾选不能拖动。其实我之前基于Sortable做过类似的效果。我也给他看了，他也不是太懂，就自己基于vuedraggable实现了。刚好有个问题要他解决。话不多说，先上最终效果：Vue的拖拽排序效果测试地址。下面是最终效果图。效果一：实现全选全选效果如下，elementUI官方demo。这很简单，没有挑战。全部v==city)}"v-for="城市中的城市":label="city":key="city">{{city}}效果二：实现拖拽效果拖拽效果基于vuedraggable。问题这里我先根据我资深的经验（踩）和检查（坑）提出几个可能的问题。实现的效果只是记录选中的item。unsortedvue和jQuery最大的区别是什么？根据以下描述，视图显示和数据可能不匹配。Vue通过数据驱动视图，也可以理解为数据变化，视图自动变化。jQuery首先通过改变即时视图反馈数据。综合以上两点可以看出，基本操作DOM的库，Vue在使用的时候是有问题的。因为他们只是操作DOM，而Vue需要你去修改数据。解决方案和代码更容易解决。当我们按照数据源对数据进行排序的时候就ok了。因为问题是库只修改了DOM，没有修改数据，那么我们可以考虑监听它的回调事件，然后手动修改数据（Sortable我是这样做的）。Vue.Draggable的封装还是有的，它提供了:list="cities"让你传入数据源，然后在操作的时候给你修改数据。全部v==city)}"v-for="城市在cities":label="city":key="city">{{city}}效果三：只有选中的才可以拖到我们上面已实施拖放。但是不选中也能拖拽排序感觉很奇怪。这里有两种方法。我记得有这么一个功能。找到文档，发现里面有draggable=".item"来指定可拖动元素的类。但是它的效果却很奇怪。确实没有选中的不能拖动，但是不能拖动选中的占据位置。所以我添加了另一种治疗方法。我对数据源进行了排序，让选中的和未选中的分成一堆。接下来，让我们谈谈第二种选择。也就是利用他提供的钩子函数来判断当前DOM是否应该进行拖动。综上所述，Vue的库在使用的时候要注意操作元数据，而不是仅仅修改DOM。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
