Vue新手必看：实现数据拖拽排序全攻略

安装Vue及相关依赖

搞Vue的时候要想实现数据拖拽排序，先装好Vue和它那些必要的东西。用npm或者yarn把Vue还有vue-draggable这类必要装备纳入麾下，这可是老生常谈了。有了它们，就可以顺利完成数据拖拽排序！

创建待排序列表

写代码前要做啥？得先搞出个要分组的列表来。这列表就像个小仓库，里面装了很多对象，每个对象都记录着一条数据。这些对象里通常有独特的序号或者显示出来的东西什么的，这样咱们就能准确认出每一项。

使用Vue组件展示列表

首先，我们要用vue的v-for指令来遍历要排序的列表，然后用v-bind给每项的ID都设定好data-id属性。这么做的原因就是要保证我们能在拖动过程里把被拖动项的ID找出来，这样才能让排序按合乎逻辑的方式进行！

你知道吗？在 Vue 组件里，我们用鼠标事件，像 mousedown、mousemove、mouseup这样的东东，就能轻易搞定拖拽功能！首先当你点击鼠标左键的时候，就开始拖拉了；然后一直移啊移，那被挪动的东西也跟着你走哦；最后再松开鼠标左键，这就完成了。只要能够掌握好这些事件，再加上计算位移什么的小把戏，拖拽功能其实挺简单的！

npm install vue
npm install vue-draggable

处理拖放事件

除了要监听鼠标活动以外，还得应对跟拖拽有关的事件，比如开始拖拽啦（dragstart），拖过了（dragover）和放下啦（drop）。通过这些事件，你就能更好地掌控被拖动的那部分内容和它要去哪里。处理这些事件时，你可能得操作下DOM，再做点数据方面的调整。

更新数据顺序

搞定排序之后，咱们就得让数据顺序跟用户改变的一致！利用drop 事件，我们能得到被移位的元素 id 和新地点的 id，然后轻松调整数据列表里每个项目的顺序。

增加过渡效果

要提高用户感觉，就给数据项加个过渡特效！用Vue自带的transition组件或者CSS特效，数据项移动起来会更顺溜，看起来舒服多了。让排序过程更有美感、更真实。

优化性能

在做数据拖拽排序这个事儿上，不能忘了性能优化！像遇到大数据量的情况，就要少折腾DOM操作，免得费劲又没啥效果。还有就是尽量避免重复排列与绘制，这样才能让网页运行得更快，也能让用户用着更爽！

  

    
{{ item.text }}
  

兼容性处理

最后，别忘了考虑到各个浏览器对HTML5原生拖放API的支持不一样，导致的兼容性的问题。为了在各式各样的环境里保证数据拖放排序功能的顺畅运行和展示效果，就得根据每个浏览器可能出现的差别来调整处理方法。

搞定！这就是用Vue做数据拖拽排序的详细步骤~看完这些，你应该会清楚怎么在自己的Vue项目里面实现这个功能了~