這幾天風暴式重新閱讀了好多Vue官方文件（真怕會消化不良），今天來講點比較有趣的效果吧！而且超簡單的就能實現在ToDoList上的～就是 「元素拖曳！」 ，做完之後感覺 Array 真是好用呀！

draggable

我們需要在html中加上標籤屬性draggable（等於true），介面就會允許我們針對元素進行拖拉的動作：

  <li v-for="todo in filtertodo" :key="todo.id" @dblclick="editTodo(todo)" draggable="true">
  ...
  </li> 

然後來認識一下相關觸發事件：

• 拖曳 源元素 上觸發

1. ondragstart：Client端開始拖曳元素時觸發
2. ondrag：元素正在拖曳時觸發
3. ondragend：Client端完成拖曳元素時觸發

• 釋放 目標元素 觸發

1. ondragenter：游標拖曳對象進入容器範圍內觸發
2. ondragover：當被拖曳元素在另一對象容器範圍內拖曳時觸發
3. ondragleave：當被游標拖曳元素離開容器範圍時觸發
4. ondrop：在拖曳過程中釋放游標時觸發

任務描述

• 拖曳開始時，能傳入事件參數和物件；藉由Array特性，我們只需取得源元素key值即可
• 拖曳進入目標元素的過程，可取得源元素，以及目標元素的key值（若進入到範圍內）
• 拖曳結束後交換Array陣列內元素

定義觸發事件

在標籤內加入@dragstart、@dragover.prevent（拖曳過程中防止觸發瀏覽器預設動作）、@dragend觸發事件，參數傳$event和todo.id：

<li draggable="true" @dragstart="handleDargStart($event,todo.id)" @dragover.prevent="handleDargOver($event,todo.id)" @dragend="handleDragEnd($event)">
...
</li>

定義響應式數據去接值：

    const mouseOnTodo = ref() //紀錄源元素id
    const mouseDownTodo = ref() //紀錄目標元素id

    function handleDargStart(e, id) {
        //取得拖曳元素
        mouseOnTodo.value = id-1 //陣列位置為id-1
    }
    function handleDargOver(e, id) {
        //取得目標元素
        mouseDownTodo.value = id - 1 //這裡的id會變動，進入拖曳範圍內才會變為目標id
    }
    function handleDragEnd(e) {
        const newTodo = props.todos[mouseOnTodo.value]
        props.todos[mouseOnTodo.value] = props.todos[mouseDownTodo.value]
        props.todos[mouseDownTodo.value] = newTodo
        //把陣列元素進行交換
    }

然後就是～Do～Re～Mi～So～

小結

雖然超容易就完成的，但也是很陽春XD而且還要多虧應用在Array之上，不然照理說，看其他元素的拖曳教學都要算出很多座標（擦汗），不過相信都是同樣的基礎去變換，懂了原理之後就會比較容易上手囉！

參考資料
ondragstart 事件
vue 利用drag实现简单元素交换位置拖拽