拖放：

拖動(dòng)的對(duì)象，需要設(shè)置draggable屬性為true (draggable="true"),
a元素需要href，img元素需要src。
1、被拖對(duì)象：dragstart事件，被拖動(dòng)的元素，開始拖放觸發(fā)
2、被拖對(duì)象：drag事件，被拖放的元素，拖放過程中
3、被拖對(duì)象：dragend事件，拖放的對(duì)象元素，拖放操作結(jié)束
4、經(jīng)過對(duì)象：dragenter事件，拖放過程中鼠標(biāo)經(jīng)過的元素，被拖放的元素“開始”進(jìn)入其它元素范圍內(nèi)（剛進(jìn)入）
5、經(jīng)過對(duì)象：dragover事件，拖放過程中鼠標(biāo)經(jīng)過的元素，被拖放的元素正在本元素范圍內(nèi)移動(dòng)(一直)
6、經(jīng)過對(duì)象：dragleave事件，拖放過程中鼠標(biāo)經(jīng)過的元素，被拖放的元素離開本元素范圍
7、目標(biāo)地點(diǎn)：drop事件，拖放的目標(biāo)元素，其他元素被拖放到本元素中

<transition-group>

利用vue原生的組件<transition-group>可實(shí)現(xiàn)列表的過渡效果，不僅可以實(shí)現(xiàn)進(jìn)入和離開動(dòng)畫，還可以改變定位。官網(wǎng)示例如下：

官網(wǎng)示例

拖拽列表代碼

<template>
  <div class="drag-wrap">
    <h2>這是一個(gè)列表拖拽</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的標(biāo)題" },
        { id: 2, title: "這里是列表2的標(biāo)題" },
        { id: 3, title: "這里是列表3的標(biāo)題" },
        { id: 4, title: "這里是列表4的標(biāo)題" },
        { id: 5, title: "這里是列表5的標(biāo)題" },
        { id: 6, title: "這里是列表6的標(biāo)題" },
        { id: 7, title: "這里是列表7的標(biāo)題" }
      ],
      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]; // 中間數(shù)組，用于交換兩個(gè)節(jié)點(diǎn)
        // 刪除老的節(jié)點(diǎn)
        newList.splice(oldIndex,1);
        // 在列表目標(biāo)位置增加新的節(jié)點(diǎn)
        newList.splice(newIndex,0,this.oldItem);
        // 更新this.List，觸發(fā)transition-group的動(dòng)畫效果
        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>

總結(jié)

該代碼的思路就是

• 1、拖拽剛開始時(shí)記錄被拖拽節(jié)點(diǎn)
• 2、在拖拽過程中記錄當(dāng)前經(jīng)過的節(jié)點(diǎn)
• 3、在拖拽結(jié)束后，判斷當(dāng)前經(jīng)過的節(jié)點(diǎn)是否是拖拽剛開始時(shí)的節(jié)點(diǎn)
• 4、如果節(jié)點(diǎn)位置發(fā)生了改變，就利用一個(gè)中間數(shù)組將兩個(gè)節(jié)點(diǎn)交換位置，然后更新List
• 5、當(dāng)List更新時(shí)會(huì)觸發(fā)<transition-group>的.List-move過渡屬性，實(shí)現(xiàn)動(dòng)畫效果