draggable收藏夹拖动排序需求（默认收藏框不参与拖动排序，默认在第一）

这个是我个人在项目开发时遇到一个比较少的需求，但感觉在现在的互联网时代会感觉这个需求还是比较常用的。由于我目前比较少使用到这个需求，所以不太熟练，所以放上来一是给自己 做个笔记，二是也可以给有需要的小伙伴参考参考。

首先上效果图

图中是一个成品的效果图，鼠标移入想移动的收藏夹时出现拖拽按钮，鼠标点击拖动，此时获取到了想要移动收藏夹在你的数组中的数据，然后拖动到想移动到的最终收藏夹的位置，此时就会出现效果，也获取了当前替代了的收藏夹在数组中的数据，当松开鼠标是，则提交移动后的数据，根据后端提供的接口提交新数据回后台保存，页面也重新获取后台数据渲染。（需求完成）

如果你觉得我这里的需求和你想要实现的相同的话可以往下看看，说不定能帮到你呢。接下来的是我的数据渲染代码：

draggable是使用的组件，当然用到组件就需要引入，我直接去main.js里做了全局引入了，这里如果有不懂的可以查看一下它们的官网，因为所有使用组件的方法都是差不多的，看官网就好。我的后台拿到的数组数据是folders，因为项目中的默认收藏夹不是一个“数据”，它只是当你没有建收藏夹的时候它默认保存的一个经过前端处理的数据（这里我也解析不清楚，因为他叔数据库的东西咯，但不影响这个需求实现的，如果你的默认收藏夹数据也在这个数组后面会说到一个解决的办法），因为我的默认收藏夹不是这数组里面的嘛，所以我在获取手台数组数据是给这数组在最开始添加了一个空的数据，这样原来数组中的第一个数据就到第二了，第一个空数据遍历出来再用CSS隐藏吊吧它的位置留给默认收藏夹（前面说的默认收藏夹如果为统一数组里的也可以用这办法，单独把默认收藏夹渲染多一次，定位到第一个位置就好，在页面看起来就是我说的那个效果啦）。@start="onStart()"是鼠标开始选中的点击动作，@end="onEnd"就是鼠标结束的点击动作了，:move="checkMove"记录了你整个移动的过程数据。

看下js文档吧

checkMove处打印出来的就是记录移动的数据，这个数据对你接下来的调用接口提交数据有很大作用，因为每个后端需提交的接口数据都不一样嘛，所以这里就得看着它和你的接口文档写了。

我这里的接口是提供要移动收藏夹的id和移动后的前面一个收藏夹的id，如果移动后该收藏夹为第一个的话，提交的after为0 即可（这哥每个后端写出来都不一样的，所以需要你跟后端交流咯），因为组件返回的evt是移动和移动后的后一个收藏夹的数据，而我的接口是移动后的前一个收藏夹的id，所以我用for遍历原来的数组，拿到组件默认返回的下一个收藏夹的下标减去一就是前一个收藏夹的啦，这样一来两个要提交给接口的数据我都有了，就可以完成开发需求啦，对了最后提交数据后别忘了重新调用获取数据接口刷新页面渲染。

这里是做个一个小小的优化，因为前面的拖动排序效果会出现卡顿的画面，让人在体验这方面不是很好，所以就做了优化，先上我修改过的代码图吧：

看图中遍历的数组可以知道我把原来computed的folders换成data中的myArray，前面体验不好的原因就是在这，每当排序完成都要提交数据接口，对于计算属性的folders 来说它就会根据后台数据实时更新，所以就导致页面卡段的效果，我用了myArray来渲染呢就是它是前端页面我定义的一个数据，他不会有刷新的卡顿效果，当然myArray的数据也要跟folders的一样才行，所以我用了watch监听它，当页面进入时就会吧value的数据给到myArray进行渲染，有人回疑问你不用folders会不会导致前后端数据不一，放心，我只是在排序这里没进行实时赋值到myArray而已，其他地方的添加删除把它两进行一次赋值就好了的。还有就是在draggable里添加了animation="300"为了控制移动是的动态过程，也是优化体验。

好了，笔记就到这了，如有不理解的可以私聊我，能让我提高技术的我也很乐意的，但也不一定会哈，原谅我的又菜又爱玩。谢谢您的阅读和谅解！