拖放事件(自己的學習筆記)

????????發表於2018-12-02

一、如何自定義拖放源和自定義拖放目標?

前者傳輸資料而不是文字內容,後者以某種方式響應拖放資料而不僅是顯示它

二、拖放事件

任何有html draggable屬性的文件元素都是拖放源。

當使用者開始用滑鼠在拖放源上拖放時,瀏覽器並沒有選擇元素內容,在該元素上觸發dragstart事件,該事件處理程式呼叫

datatransfer.setdata()指定當前可用的拖放源資料和資料型別(當新的html5 api實現,可用datatransfer.items.add()代替)

datatransfer.effectallowed()——指定支援移動、複製、連結傳輸操作中的幾種

datatransfer.setdragimage()/addelement()——指定圖片或者文件元素用做拖動時的視覺表現

當放置資料時,觸發dragend事件,如果拖放源支援移動操作,就會檢查datatransfer.dropeffect看看是否實際執行了移動操作,如果執行了資料就會被傳輸到其他地方,應該從資料來源中刪除它

拖放目標比拖放源更難處理

有4個事件在拖放目標上面觸發

dragenter——拖放物件進入文件元素時觸發

datatransfer.types——確定拖放物件的可用數是否是其可以理解的格式

拖放目標通過取消事件告知瀏覽器其對放置感興趣

如果元素不取消dragenter事件,那麼瀏覽器將不會把它作為本次拖放的拖放目標

否則傳送dragover事件表示使用者繼續在目標上面拖動物件

拖放目標必須監聽且取消所有事情來表明他繼續對放置感興趣

dragleave——表示要取消任何其他為響應dragenter事件而執行的視覺化反饋

dragenter和dragleave會冒泡

拖放物件到拖放目標上——觸發drop事件

該事件應該使用datatransfer.getdata()來獲取傳輸的資料並做處理

使用者放置一個或者多個目標——datatransfer.files將是一個類陣列物件













相關文章