vue 拖拽列表

拖放：

拖動的對象，需要設置draggable屬性為true (draggable="true"),a元素需要href，img元素需要src。

1、被拖對象：dragstart事件，被拖動的元素，開始拖放觸發
2、被拖對象：drag事件，被拖放的元素，拖放過程中
3、被拖對象：dragend事件，拖放的對象元素，拖放操作結束
4、經過對象：dragenter事件，拖放過程中鼠標經過的元素，被拖放的元素“開始”進入其它元素范圍內（剛進入）
5、經過對象：dragover事件，拖放過程中鼠標經過的元素，被拖放的元素正在本元素范圍內移動(一直)
6、經過對象：dragleave事件，拖放過程中鼠標經過的元素，被拖放的元素離開本元素范圍
7、目標地點：drop事件，拖放的目標元素，其他元素被拖放到本元素中

利用vue原生的組件<transition-group>可實現列表的過渡效果，不僅可以實現進入和離開動畫，還可以改變定位。官網示例如下：

拖拽列表代碼

<template>
  <div class="drag-wrap">
    <h2>這是一個列表拖拽</h2>
    <transition-group name="List">
      <div
        class="drag-list"
        v-for="item in List"
        :key="item.id"
        draggable="true"
        @dragstart="dragstart(item)"
        @dragenter="dragenter(item)"
        @dragend="dragend(item)"
      >{{item.title}}</div>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      List: [
        { id: 1, title: "這里是列表1的標題" },
        { id: 2, title: "這里是列表2的標題" },
        { id: 3, title: "這里是列表3的標題" },
        { id: 4, title: "這里是列表4的標題" },
        { id: 5, title: "這里是列表5的標題" },
        { id: 6, title: "這里是列表6的標題" },
        { id: 7, title: "這里是列表7的標題" }
      ],
      oldItem: '',
      newItem: '',
    }
  },
  methods: {
    // 記錄初始信息
    dragstart(item) {
      this.oldItem = item;
    },
    // 記錄過程中信息
    dragenter(item) {
      this.newItem = item;
    },
    // 做最終操作
    dragend(item) {
      if(this.oldItem != this.newItem) {
        let oldIndex = this.List.indexOf(this.oldItem);
        let newIndex = this.List.indexOf(this.newItem);
        let newList = [...this.List]; // 中間數組，用於交換兩個節點
        // 刪除老的節點
        newList.splice(oldIndex,1);
        // 在列表目標位置增加新的節點
        newList.splice(newIndex,0,this.oldItem);
        // 更新this.List，觸發transition-group的動畫效果
        this.List = [...newList];
      }
    }
  }
}
</script>
<style scoped>
  .List-move {
    transition: transform 1s;
  }
  .drag-list {
    margin: 0 auto;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #20a0ff;
    background-color: #bfa;
  }
</style>

總結

該代碼的思路就是

• 1、拖拽剛開始時記錄被拖拽節點
• 2、在拖拽過程中記錄當前經過的節點
• 3、在拖拽結束后，判斷當前經過的節點是否是拖拽剛開始時的節點
• 4、如果節點位置發生了改變，就利用一個中間數組將兩個節點交換位置，然后更新List
• 5、當List更新時會觸發 的.List-move過渡屬性，實現動畫效果