一、如何自定義拖放源和自定義拖放目標?
前者傳輸資料而不是文字內容,後者以某種方式響應拖放資料而不僅是顯示它
二、拖放事件
任何有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將是一個類陣列物件