DragEvent 介面是一種 DOM event,定義了拖放操作時產生的事件物件。使用者藉由把指標裝置 (例如滑鼠) 放到有效區域並拖移到另一個新的位置 ( 如另外一個 DOM 元素 ) 來開始一個拖動的動作。 而應用程式可以自由地決定互動的方式來達到符合該應用程式的使用情境。

This interface inherits properties from MouseEvent and Event.


DragEvent.dataTransfer Read only
The data that is transferred during a drag and drop interaction.


Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops.

DragEvent() (en-US)
Creates a synthetic and untrusted DragEvent.


drag (en-US)
dragend (en-US)
在『被選擇的物件』結束拖曳時觸發 (就是放開滑鼠鍵、或按下 Esc 鍵時)。
dragenter (en-US)
當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『進入』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。
This event is fired when an element is no longer the drag operation's immediate selection target.
dragleave (en-US)
當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『離開』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。
dragover (en-US)
當『被選擇的物件』被拖曳到『可以當目標的物件』的上方時觸發 (頻率大約每秒數次)。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』 。
dragstart (en-US)
drop (en-US)
當『被選擇的物件』被拖曳、放到『目標物件』時觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『目標物件』。


GlobalEventHandlers.ondrag (en-US)
A global event handler for the drag (en-US) event.
GlobalEventHandlers.ondragend (en-US)
A global event handler for the dragend (en-US) event.
GlobalEventHandlers.ondragenter (en-US)
A global event handler for the dragenter (en-US) event.
GlobalEventHandlers.ondragexit (en-US)
A global event handler for the dragexit event.
GlobalEventHandlers.ondragleave (en-US)
A global event handler for the dragleave (en-US) event.
GlobalEventHandlers.ondragover (en-US)
A global event handler for the dragover (en-US) event.
GlobalEventHandlers.ondragstart (en-US)
A global event handler for the dragstart (en-US) event.
GlobalEventHandlers.ondrop (en-US)
A global event handler for the drop (en-US) event.


An Example of each property, constructor, event type and global event handlers is included in their respective reference page.


Specification Status Comment
HTML Living Standard
The definition of 'DragEvent' in that specification.
Living Standard
HTML 5.1
The definition of 'DragEvent' in that specification.
Recommendation Initial definition


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (Yes) 3.5 (1.9.1) 10 12 3.1
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support (Yes) No support No support 10 No support No support