这篇文章主要介绍了基于Vue如何实现平滑过渡的拖拽排序功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
专注于为中小企业提供
网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业
永吉免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
官网示例如下：
例子中实现的效果看起来还是非常不错的，这个效果使我想起来另外一个使用场景，之前我在实现一个列表展示需求的时候，PM想让这个列表具有拖动排序的功能，方便他操作（事实上我最后并没有给他做哈哈），拖动的动画跟这个很像，网上搜索一下，类似插件应该很多，那如果我们自己来实现一个，问题在哪里呢？
首先要拖拽元素，记录元素拖拽开始和结束的信息。
将元素由拖拽开始的地方移到拖拽结束地方，这期间，目标元素和目标元素周围的元素要怎么平滑过渡到新的位置。
问题1很好解决，翻一下api，HTML5提供了性能很棒的拖放API，PC端兼容性良好，可直接使用
问题2刚好可以使用上面学到的
拖放API中提到，一个可拖拽的元素，在用户拖拽这一整个流程中，可以通过这个事件去获取你想要的信息：
这里的话，我们选取dragstart去记录下拖拽元素的信息，dragenter去记录此元素拖拽时经过了哪些元素，dragend事件中去做拖拽结束的操作，动画的事情就交给transition-group去做了。
最终实现的效果如下：
demo代码如下：
test
.flip-list-move {
transition: transform 1s;
}
.items {
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid red;
}
{{item}}
