基于Vue的拖拽排序功能 实现平滑过渡

最近重读了Vue的官方文件。在列表的排序过渡部分，文档提到过渡组组件有一个特殊的地方，它不仅可以进入和离开动画，还可以改变定位。官网示例如下：

示例中达到的效果看起来仍然非常好。这个效果让我想起了另一个使用场景。之前实现一个列表显示需求的时候，PM希望这个列表有拖拽和排序的功能，方便他操作(其实最后我也没有给他)。拖动的动画和这个非常相似。如果我们在网上搜索，应该会有很多类似的插件。如果我们自己实现一个，问题是什么？

首先，拖放元素，记录拖放元素的开始和结束信息。

将元素从拖动的开始移动到拖动的结束。在此期间，目标元素和目标元素周围的元素应该如何平稳过渡到新位置？

问题1很容易解决。看api，HTML5提供了一个性能出色的拖放API，兼容PC，可以直接使用

问题2可以通过使用上面学习的过渡组组件来实现。

如拖放API中所述，在用户拖放的整个过程中，一个可拖动的元素可以通过这个事件获得你想要的信息：

在这种情况下，我们选择dragstart来记录被拖动元素的信息，dragenter来记录元素被拖动时经过了哪些元素，dragend事件中的dragend操作，动画留给transition-group。

最终效果如下：

演示代码如下：

！DOCTYPE html html lang=' en ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta name=' viewport ' content=' initial-scale=1，maximum-scale=1，minimum-scale=1，user-scale=no，width=device-width ' title test/title style type=' text/CSS '。翻转列表移动{ transition: transform 1s} .项目{ width: 300px高度： 50px；线高： 50px；文本对齐：中心；border: 1px纯红；}/style/head body div id=' content ' transition-group name=' flip-list ' div v-for=' item in items ' : key=' item ' drag able=' true ' class=' items ' @ drag start=' drag ST art(item)' @ drag enter=' drag enter(item)' @ drag end=' drag end(item)' { { item } }/div/transition-group/div script src=' http :https://cdn . jsdeliver . net/net洗牌(this . items)；}，//记录初始信息dragstart:函数(值){this。oldnum=值；}，//做最后的操作dragend:函数(value) {if (this。奥德姆。=this.newNum) {让oldIndex=this . items . indexof(this . oldnum)；让new index=this . items . indexof(this . newnum)；让newItems=[.this . items]；//删除旧节点newItems.splice(oldIndex，1)；//将新节点newitems.split (newindex，0，this.oldnum)添加到列表中的目标位置；//就在这个时候。项目变更，过渡组进场。this.items=[.newItems]；}}，//记录信息dragenter :函数(值){this。newnum=值；} } });/script/body/html注意：你也可以一次又一次的拖放来改变顺序，不用等dragend再动画，但是边拖边动画的时候看起来很刺眼(这个演示只是这样，其他插件可以提供其他解决方案，所以暂时按no table)，所以我选择在用户拖停之后再动画。

在这一节中，vue官方还介绍了一个简单的动画队列，叫做FLIP，有兴趣的话可以研究一下。当你打开这个FLIP的时候，你会发现它的例子中引入了另一个动画库GASP，可以达到很酷的动画效果，和FLIP结合起来效果更好。

摘要

以上是边肖介绍的基于Vue的拖拽排序功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！