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

网络编程 2024/11/14 佚名

3 2 1

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

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

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

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

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

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

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

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

最终实现的效果如下：

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实现平滑过渡的拖拽排序功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

vue,平滑过渡,vue拖拽排序

标签：

vue,平滑过渡,vue拖拽排序

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“基于Vue实现平滑过渡的拖拽排序功能”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

vue,平滑过渡,vue拖拽排序

详解vue中的父子传值双向绑定及数据更新问题

Vue + Elementui实现多标签页共存的方法

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

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接