天天看點

html沒有拖拽程式設計效率高,HTML的拖拽接口,老程式員經驗總結,純!幹!貨

原标題:HTML的拖拽接口,老程式員經驗總結,純!幹!貨

⒈什麼是拖拽?

本質上來說就是一個對象和一個對象直接傳遞。

其實學習拖拽,就是學習拖拽事件。

⒉在HTML5中很多元素是不能進行拖拽的,比如說圖檔和超連結:

在試圖拖拽時你會發現一個禁止的符号,如果想拖拽元素,就必須為元素添加draggable="true"。

⒊相關的事件

應用于被拖拽元素的事件

ondrag 應用于拖拽元素,整個拖拽過程都會調用--持續

ondragstart 應用于拖拽元素,當拖拽開始時調用

ondragleave 應用于拖拽元素,當滑鼠離開拖拽元素時調用

ondragend 應用于拖拽元素,當拖拽結束時調用

應用于目标元素的事件

ondragenter 應用于目标元素,當拖拽元素進入時調用

ondragover 應用于目标元素,當停留在目标元素上時調用

ondrop 應用于目标元素,當在目标元素上松開滑鼠時調用

ondragleave 應用于目标元素,當滑鼠離開目标元素時調用

案例:

html沒有拖拽程式設計效率高,HTML的拖拽接口,老程式員經驗總結,純!幹!貨
html沒有拖拽程式設計效率高,HTML的拖拽接口,老程式員經驗總結,純!幹!貨
html沒有拖拽程式設計效率高,HTML的拖拽接口,老程式員經驗總結,純!幹!貨

注意:如果想觸發ondrop事件,那麼就必須在ondragover事件中阻止浏覽器的預設行為。

來源網絡,侵權聯系删除傳回搜狐,檢視更多

責任編輯: