星期五, 2月 22, 2013

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


2 則留言:

Aaron Huang 提到...

計算位移量而不是計算滑鼠位置會好一些 :)
小修改 http://codepen.io/aar0nTw/pen/DhlCo

小莊 提到...

感謝建議,已經修改囉!