就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. DragEvent

在此页

DragEvent 接口是 DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

此接口继承特性从 MouseEvent and 事件 .

特性

DragEvent.dataTransfer 只读

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

This event is fired when an element or text selection is being dragged.

dragend

This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

dragenter

This event is fired when a dragged element or text selection enters a valid drop target.

dragexit

This event is fired when an element is no longer the drag operation's immediate selection target.

dragleave

This event is fired when a dragged element or text selection leaves a valid drop target.

dragover
This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than mouseover ).
dragstart

This event is fired when the user starts dragging an element or text selection.

drop

This event is fired when an element or text selection is dropped on a valid drop target.

GlobalEventHandlers

GlobalEventHandlers.ondrag
global event handler 为 drag 事件。
GlobalEventHandlers.ondragend
global event handler 为 dragend 事件。
GlobalEventHandlers.ondragenter
global event handler 为 dragenter 事件。
GlobalEventHandlers.ondragexit
global event handler 为 dragexit 事件。
GlobalEventHandlers.ondragleave
global event handler 为 dragleave 事件。
GlobalEventHandlers.ondragover
global event handler 为 dragover 事件。
GlobalEventHandlers.ondragstart
global event handler 为 dragstart 事件。
GlobalEventHandlers.ondrop
global event handler 为 drop 事件。

范例

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

规范

规范 状态 注释
HTML 实时标准
The definition of 'DragEvent' in that specification. 		实时标准
HTML 5.1
The definition of 'DragEvent' in that specification. 		推荐 初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
DragEvent Chrome 3 Edge 12 Firefox 3.5 IE 10 Opera 12 Safari 3.1 WebView Android No Chrome Android No Firefox Android 4 Opera Android No Safari iOS No Samsung Internet Android No
DragEvent() 构造函数 Chrome 46 Edge 12 Firefox 3.5 IE 10 Opera 12 Safari 3.1 WebView Android No Chrome Android No Firefox Android Yes Opera Android No Safari iOS No Samsung Internet Android No
dataTransfer Chrome 46 Edge 12 Firefox 3.5 IE 10 Opera Yes Safari 3.1 WebView Android No Chrome Android No Firefox Android Yes Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

另请参阅

元数据

  • 最后修改：
  1. HTML 拖放 API
  2. DragEvent
  3. 构造函数
    1. DragEvent()
  4. 特性
    1. dataTransfer
  5. 继承：
    1. MouseEvent
    2. UIEvent
    3. 事件
  6. Related pages for HTML Drag and Drop API
    1. DataTransfer
    2. DataTransferItem
    3. DataTransferItemList