[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种坐标