實現平滑過渡的拖拽排序

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。