DDR爱好者之家

基于Vue实现平滑过渡的拖拽排序功能
站长资源 2024/11/25 佚名
68 1538
DDR爱好者之家 Design By 杰米

最近重读Vue官方文档，在 列表的排序过渡 这一小节，文档提到，<transition-group> 组件有一个特殊的地方，不仅可以实现进入和离开动画，还可以改变定位，官网示例如下：

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

例子中实现的效果看起来还是非常不错的，这个效果使我想起来另外一个使用场景，之前我在实现一个列表展示需求的时候，PM想让这个列表具有拖动排序的功能，方便他操作（事实上我最后并没有给他做哈哈），拖动的动画跟这个很像，网上搜索一下，类似插件应该很多，那如果我们自己来实现一个，问题在哪里呢？

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

将元素由拖拽开始的地方移到拖拽结束地方，这期间，目标元素和目标元素周围的元素要怎么平滑过渡到新的位置。

问题1很好解决，翻一下api，HTML5提供了性能很棒的拖放API，PC端兼容性良好，可直接使用

问题2刚好可以使用上面学到的<transition-group>组件去实现。

拖放API中提到，一个可拖拽的元素，在用户拖拽这一整个流程中，可以通过这个事件去获取你想要的信息：

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

这里的话，我们选取dragstart去记录下拖拽元素的信息，dragenter去记录此元素拖拽时经过了哪些元素，dragend事件中去做拖拽结束的操作，动画的事情就交给transition-group去做了。

最终实现的效果如下：

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

demo代码如下：

<!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-scalable=no, width=device-width">
  <title>test</title>
  <style type="text/css">
    .flip-list-move {
    transition: transform 1s;
   }
   .items {
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid red;
   }
  </style>
</head>
<body>
  <div id="content">
   <transition-group name="flip-list">
     <div v-for="item in items" :key="item" draggable="true" class="items" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend(item)">{{item}}</div>
   </transition-group>
  </div>
  <script src="/UploadFiles/2021-04-02/vue.js">


注：你也可以一遍拖拽一遍更改顺序，不用等dragend再做动画，但是一边拖拽一边做动画的时候看起来眼花缭乱的（仅以这个demo来看是这样的，其他插件可以提供别的解决方法，暂且按下不表）所以我选择用户拖拽停止之后再做动画。


在这一节中，vue官方还介绍了一个叫FLIP的简单的动画队列，有兴趣可以研究一下， FLIP介绍 ，打开这个FLIP你会发现它的示例中有介绍另外一个动画库GASP ，可以实现很酷炫的动画效果，跟FLIP结合使用效果更佳。


总结


以上所述是小编给大家介绍的基于Vue实现平滑过渡的拖拽排序功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米