在HTML5的規範中,我們可以通過為元素增加`draggable="true"`來設置此元素是否可以進行拖拽操作,其中圖片、鏈接預設是開啟的。 1. 拖拽元素:設置了`draggable="true"`的元素 當拖動某元素時,將依次觸發下列事件: 1. dragstart(按下滑鼠並開始移動滑鼠時, ...
在HTML5的規範中,我們可以通過為元素增加`draggable="true"`來設置此元素是否可以進行拖拽操作,其中圖片、鏈接預設是開啟的。
1. 拖拽元素:設置了`draggable="true"`的元素
當拖動某元素時,將依次觸發下列事件:
1. dragstart(按下滑鼠並開始移動滑鼠時,會在被拖放的元素上觸發dragstart事件)
2. drag(觸發dragstart事件後,隨即會觸發drag時間,而且在元素被拖動器件會持續觸發該事件)
3. dragend(當拖動停止時,無論是否把元素放到了有效的放置目標上,會觸發dragend事件)
2. 目標元素:頁面中的任何一個元素都可以成為目標元素
當某個元素倍拖動到一個有效的目標上時,下列事件會依次發生:
1. dragenter(只要有元素倍拖放到目標上,就會觸發dragenter事件)
2. dragover(dragenter被觸發後緊接著觸發dragover事件,在被拖動目標一直在目標範圍內時,dragover事件會持續被觸發)
3. dragleave或drop(如果元素被拖出了放置目標,dragover事件不再觸發,但會觸發dragleave事件;如果元素被放到了目標元素中,則觸發drop事件而不是dragleave事件)
3. 自定義目標元素
雖然所有的元素都支持放置目標事件,但是這些元素預設是不允許放置的。如果拖動元素經過不允許放置的元素,無論永輝如何操作,都不會觸發drop事件。
如果需要設置允許放置,我們必須阻止對元素的預設處理方式:
這要通過調用 dragover 事件的 event.preventDefault() 方法來阻止預設事件發生,即改變目標元素不允許放置屬性,這時,當元素在目標元素上被滑鼠釋放時,就會觸發drop事件。