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()
- Creates a synthetic and untrusted DragEvent.
事件類型
drag
- 在『被選擇的物件』被拖曳時觸發。
dragend
- 在『被選擇的物件』結束拖曳時觸發 (就是放開滑鼠鍵、或按下 Esc 鍵時)。
dragenter
- 當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『進入』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。
dragexit
- This event is fired when an element is no longer the drag operation's immediate selection target.
dragleave
- 當『被選擇的物件』被拖曳到『可以當目標的物件』時, 在『離開』該目標物件上方的瞬間觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』。
dragover
- 當『被選擇的物件』被拖曳到『可以當目標的物件』的上方時觸發 (頻率大約每秒數次)。注意, 不是『被選擇的物件』觸發此事件, 而是『可以當目標的物件』 。
dragstart
- 在『被選擇的物件』開始拖曳時觸發。
drop
- 當『被選擇的物件』被拖曳、放到『目標物件』時觸發。注意, 不是『被選擇的物件』觸發此事件, 而是『目標物件』。
通用事件處理器
GlobalEventHandlers.ondrag
- A
global event handler
for thedrag
event. GlobalEventHandlers.ondragend
- A
global event handler
for thedragend
event. GlobalEventHandlers.ondragenter
- A
global event handler
for thedragenter
event. GlobalEventHandlers.ondragexit
- A
global event handler
for thedragexit
event. GlobalEventHandlers.ondragleave
- A
global event handler
for thedragleave
event. GlobalEventHandlers.ondragover
- A
global event handler
for thedragover
event. GlobalEventHandlers.ondragstart
- A
global event handler
for thedragstart
event. GlobalEventHandlers.ondrop
- A
global event handler
for thedrop
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!
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 |