HTML5 Drag and Drop(拖曳效果)

在 HTML5 多了 Drag and Drop 的 API 後，我們便能用比較方便的方式來實現拖曳的效果，好好的設計拖曳的效果可以讓我們的網頁在開發上有更豐富的互動性。

要讓 HTML 的元素可以拖曳，只要在元素加上 draggable="true" 的屬性即可，這邊可以注意 a 跟 img 的標籤是不需要加上這個屬性的。

我們先準備兩個區塊，一個是可以拖曳的，一個是我們等等要把內容放進去的區塊。

因為已經加了 draggable="true"，所以 box 已經可以隨意移動了，但由於還沒有加上放置的設定，所以還沒辦法更使用者有更近一步的互動。

當東西可以拖曳的時候，就會觸發以下事件：

• Dragstart: 拖曳開始
  
• Dragenter: 拖曳進入目標
  
• Dragover: 拖曳的物件在目標裡面
  
• Dragleave: 拖曳的物件離開目標
  
• Drop: 放置
  
• Dragend: 拖曳結束
  
• dataTransfer物件

 這些事件有些是發生在拖曳的物件，有些則是在要放置的目標上，我們用一個表格來說明。

來測試一下抓事件：

$(".box").on({
  "dragstart": function(){
    console.log("dragstart");
  },
  "dragend": function(){
    console.log("dragend");
  }
})

$("#target").on({
  "dragenter": function(){
    console.log("dragenter");
  },
  "dragover": function(){
    console.log("dragover");
  },
  "dragleave": function(){
    console.log("dragleave");
  },
  "drop": function(){
    console.log("drop");
  }
})

有沒有發現目前可以抓到事件但還沒辦法把東西放到目標裡，那是因為我們必須在拖曳的時候利用 dataTranfer 把資料存起來，要 drop 的時候把資料讀出來再放進去才可以完成 drag and drop 事件。

在拖曳的物件上加上這段

event.originalEvent.dataTransfer.setData('text/plain',event.target.id)

在 drop 事件上加上這段

let id = event.originalEvent.dataTransfer.getData('text/plain');
$("#"+id).appendTo(event.target);

注意我都有加上一個 event.preventDefault(); 是避免讓原生的行為影響到我們的拖曳，完成的結果如下：

再修改一下讓 box 可以在兩個區塊內拖曳：

再修改一下做多個 box 可以在兩個區塊間拖曳

 這邊我有加上了一個 css 的屬性讓可以拖曳的目標滑鼠游標改變

[draggable="true"] {
  cursor: move;
}

前面的拖曳是把內容給拖到另一個區塊，如果我們想要把內容新增過去，比方是拖曳的購物車功能，可以改成 $(elem).clone().appendTo() 這樣