[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作法很多種. 只是趁這次探討這問題的同時提出一種做法而已.

[JavaScript] Drag and Drop implementation - Drag

  之前有人問過我, 如果沒有 jQuery或是 YUI的函式庫, 要你實作一個拖拉的效果 (Drag and Drop)的效果,你會怎麼做? 好的問題比好的答案更為難得, 雖然時間有點久了我還是找時間自己思考了一下我會怎樣做.

  先從下面三個行為來思考, 首先就是要算出滑鼠的位置.這邊真的就是一門數學大工程了.

Ref.1 瀏覽器的各位置寬度屬性

  

  雖然有點這範例圖示瀏覽器版本舊了, 不過很多概念都還是可以使用的.

• onMouseDown: 將滑鼠點擊的物件取出.
• onMouseMove: 
• 設定滑鼠 style為 absolute.
• 計算滑鼠位置: mousePosition - mouseOffset
• x: (event.clientX + document.body.scrollLeft - document.body.clientLeft) - mouseOffset.x
• y: event.clientY + document.body.scrollTop  - document.body.clientTop  - mouseOffset.y
• mouseOffset: 設定物件為滑鼠的點擊後經過運算的位置 (請參考下方原始碼)
• 因為沒人知道使用者會點在物件的哪個位置上, 所以這邊要稍微計算一下.(使用offsetLeft跟 offsetTop做運算.)

• onMouseUp: 取消滑鼠物件,設定為NULL.

  這是 Drag的作法, 還有 Drop的做法待續.

Check out this Pen!

[Reference] 

[Ref.1] Browser client X scrollLeft client left
[Ref.2] Event对象的5种坐标