因為公司的一個專案需求，實現拖拽來交換位置，雖然知道有一些外掛，但還是想有沒有其它的快速實現方法，因為之前好像有了解過標籤的拖拽屬性，還稍微有點印象。就想試試。就在這裡簡單的做個總結。

• 當目標元素被拖動時觸發該事件
• 開始拖動時，滑鼠不鬆開，會一直觸發該事件

document.addEventListener("drag", function( event ) {
  console.log('拖動目標元素時觸發drag事件')
}, false);

dragstart事件

• 當目標元素開始拖動時觸發該事件

document.addEventListener("dragstart", function( event ) {
  console.log('開始拖拽事件')
}, false);
 

dragover事件

• 放置目標元素時觸發事件，放置到有效的放置目標時
• 滑鼠不鬆開會一直觸發該事件

document.addEventListener("dragover", function( event ) {
  console.log('放置目標元素時觸發事件 ')
}, false);

dragenter事件

• 可拖動的元素進入可放置的目標時觸發，即拖動到一個有效的目標上

document.addEventListener("dragenter", function( event ) {
  console.log('當可拖動的元素進入可放置的目標時高亮目標節點')
}, false);
 

dragleave事件

• 拖動元素離開可放置目標節點時觸發，即離開有效目標時
• 一個標籤相當於一個節點，包含html,body，但是不包含 head、沒有高度的標籤或者 display 屬性為 none 的標籤，其中的高度包含了 margin

document.addEventListener("dragleave", function( event ) {
  console.log('當拖動元素離開可放置目標節點，重置其背景')
}, false);

drop事件

• 將拖動的元素到所選擇的放置目標節點中時觸發，即將拖動的元素放置到一個有效的目標中時觸發

document.addEventListener("drop", function( event ) {
  console.log('將拖動的元素到所選擇的放置目標節點中')
}, false);
 

dragend事件

• 結束拖拽事件，滑鼠鬆開結束拖動時觸發

document.addEventListener("dragend", function( event ) {
    console.log('結束拖拽事件')
}, false);

在vue中相關事件

• @drag

• @dragstart

• @dragover

• @dragenter

• @dragleave

• @drop

• @dragend

<li
  draggable="true"
  @dragstart="dragstarts($event,index)"
  @dragend="dragengs"
  @dragenter="dragenters($event,index)"
>

MDN連結： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drag_event