js進階技巧---拖放

標籤：style   http   color   io   使用   ar   sp   on   cti   

拖放：點擊某個對象，並按住滑鼠按鍵不放，將滑鼠移動到另一個地區，然後釋放滑鼠按鍵將對象“放”在某處。

涉及到event的對象的屬性：

clientX，clientY：當事件被觸發時滑鼠指標相對於瀏覽器頁面（或客戶區）的座標。

screenX，screenY：當事件發生時滑鼠指標相對於螢幕的座標。

offsetX，offsetY：當事件發生時滑鼠指標相對於觸發事件的元素內邊界的座標。

x，y：當事件發生時滑鼠指標相對於觸發事件的元素外邊界的座標。

 

1.聲明了一個對象DragDrop，該對象是一個單例對象，並使用了模組模式來隱藏某些實現細節。

2.該對象的使用：

     需要給元素加上draggable類，並將元素設為絕對位置

     然後再js中調用DragDrop對象的方法：DragDrop.enable();

3.拓展：

     為DragDrop對象添加了自訂事件，使得這個對象可以擁有事件。可以觀察開始拖動，拖動過程中，停止拖動的幾種狀態

 

代碼地址：https://github.com/xiaoxiaojing/practiseCode/blob/master/advancedSkills/drag.html

   註：代碼中用到了event.js和custom_event.js。可以在這裡擷取。

參考書籍：《js進階程式設計》

js進階技巧---拖放