在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事件。
