实现平滑过渡的拖拽排序

时间 2019-11-08

标签实现平滑过渡排序繁體版

原文原文链接

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

例子中实现的效果看起来仍是很是不错的，这个效果使我想起来另一个使用场景，以前我在实现一个列表展现需求的时候，PM想让这个列表具备拖动排序的功能，方便他操做（事实上我最后并无给他作哈哈），拖动的动画跟这个很像，网上搜索一下，相似插件应该不少，那若是咱们本身来实现一个，问题在哪里呢？html

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

问题1很好解决，翻一下api，HTML5提供了性能很棒的拖放API，PC端兼容性良好，可直接使用
问题2恰好可使用上面学到的<transition-group>组件去实现。vue

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

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

最终实现的效果以下：
api

demo代码以下：bash

<!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="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
    <script>
        var vue = new Vue({
          el: '#content',
          data: {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            oldNum: 0,
            newNum: 0
          },
          created: function created () {
            
          }, 
          mounted: function mounted () {
          },
          methods: {
            shuffle: function() {
              this.items = _.shuffle(this.items);
            },
            // 记录初始信息
            dragstart: function(value) {
              this.oldNum = value;
            },
            // 作最终操做
            dragend: function(value) {
              if (this.oldNum != this.newNum) {
                let oldIndex = this.items.indexOf(this.oldNum);
                let newIndex = this.items.indexOf(this.newNum);
                let newItems = [...this.items];
                // 删除老的节点
                newItems.splice(oldIndex, 1); 
                // 在列表中目标位置增长新的节点
                newItems.splice(newIndex, 0, this.oldNum);
                // this.items一改变，transition-group就起了做用
                this.items = [...newItems];
              }
            },
            // 记录移动过程当中信息
            dragenter: function(value) {
              this.newNum = value;
            }
          }
        });  
    </script>
</body>

</html>

注：你也能够一遍拖拽一遍更改顺序，不用等dragend再作动画，可是一边拖拽一边作动画的时候看起来眼花缭乱的（仅以这个demo来看是这样的，其余插件能够提供别的解决方法，暂且按下不表）因此我选择用户拖拽中止以后再作动画。
在这一节中，vue官方还介绍了一个叫FLIP的简单的动画队列，有兴趣能够研究一下，FLIP介绍，打开这个FLIP你会发现它的示例中有介绍另一个动画库GASP，能够实现很酷炫的动画效果，跟FLIP结合使用效果更佳。ide