拖放事件

#1. 三個物件

源物件    --  被拖放的元素

過程物件  --  經過的元素

目標物件  --  到達的元素

#2. 源物件中的事件

要想讓某個元素可以拖拽需要設定draggable="true"大多數的標籤該屬性預設值是false，但是img標籤和a標籤的draggable屬性預設是true

dragstart 源物件開始拖放

drag 源物件拖放過程中

dragend 源物件拖放結束

#3. 過程物件中的事件

dragenter 源物件開始進入過程物件範圍( 滑鼠進入 )

dragover 源物件在過程物件範圍內移動

dragleave 源物件離開過程物件範圍
 

#4. 目標物件

drop 源物件被拖放到目標物件內

==++pay attention to ! ! !++==

• 頁面中的元素預設都是過程物件
• 過程物件的dragover事件有一個預設行為！！！
• 那就是當dragover觸發時，drop會失效！！！！
• 所以需要阻止dragover的預設行為才能觸發drop

#5. 簡單拖放步驟

1. 將源物件draggable屬性值置為true,允許元素可拖放

2. 給源物件繫結開始拖放事件,規定當元素被拖動時會發生什麼

3. 給過程物件繫結拖動經過事件,規定經過過程物件時會發生什麼

4. 阻止目標物件的dragover事件的預設行為

5. 給目標物件繫結(drop)事件 ,規定放開後會發生什麼
 

#二、dataTransfer

==dataTransfer== 是拖放事件物件中的屬性,該屬性用於源物件和目標物件之間的資料傳輸。==資料型別不區分大小寫==。

 1. 在源物件裡面儲存資料 e.dataTransfer.setData("資料型別","值") 
 
 2. 在目標物件裡面獲取資料 e.dataTransfer.getData("資料型別") 
 
 3. 在源物件裡面清除資料 e.dataTransfer.clearData("資料型別(可省,省則清除所有)")
 
 4. effectAllowed 和 dropEffect 這兩個屬性結合起來設定拖放的視覺效果  copy、link、move
 
 5. e.dataTransfer.setDragImage(img,100,100);  
     第一個引數：img物件
     第二個引數：滑鼠相對於圖片的x方向偏移量
     第三個引數：滑鼠相對於圖片的y方向偏移量