[JavaScript] Drag and Drop implementation - Drop

  上一篇我們介紹 Drag and Drop的 Drag, 現在我們來實作看看Drop.的困難點會在哪邊呢? 我們就來討論看看.

  Drag and Drop操作主要分做三部, mouseDown, mouseMove 以及 mouseUp. 而 Drag則複雜的在前面兩個 (Down 跟Move). 所以 Drop自然就在 mouseUp囉!

  我本來一度很天真的以為有辦法透過 onMouseUp(event) 的 event取得 drop區域的物件. 結果實作才知道, 這 event指的是我們操作的 draggable物件. 所以要取得 drop區域這邊其實是要經過計算的, 才能算出我們到底有沒有丟到到我們想要的區域.
  下面是範例, 請大家點擊 edit on 點開來看會比較完整.

Check out this Pen!

  我們在一開始宣告一個變數存放 dropArea, 而在onMouseUp這邊我們增加了了判斷. 判斷拖拉的物件是不是有落在掉落的此在範圍的 offsetWidth跟 offsetHeight裏面.

  這個 Drag and Drop的範例的重點我大致擷取如下.

• 三個步驟
• onMouseDown
• onMouseMove
• onMouseUp
• onMouseDown: 取得滑鼠點擊物件的偏移量 ( mouseOffset 不然移動時候設定位置會錯位)
• onMouseMove: 
• 將拖拉物件 display設定為 absolute.
• {x,y} = 滑鼠位置-滑鼠點擊物件偏移量
• 滑鼠位置.x = event.clientX + document.body.scrollLeft - document.body.clientLeft
• 滑鼠位置.y = event.clientY + document.body.scrollTop  - document.body.clientTop 
• onMouseUp:
• 利用物件的 offsetWidth跟 offsetHeight計算是否落在 drop區域.

  當然 Drag and Drop作法很多種. 只是趁這次探討這問題的同時提出一種做法而已.