DragEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年9月⁩.

DragEvent 是一个表示拖、放交互的一个DOM event 接口。用户通过将指针设备（例如鼠标）放置在触摸表面上并且然后将指针拖动到新位置（诸如另一个 DOM 元素）来发起拖动。应用程序可以按应用程序特定的方式自由解释拖放交互。

这个接口继承 MouseEvent 和Event属性

属性

DragEvent.dataTransfer 只读: 在拖放交互期间传输的数据。

构造函数

虽然这个接口有一个构造函数，但不可能从脚本创建一个有用的 DataTransfer 对象，因为在拖放期间，有一个由浏览器分配的一个处理中和安全模式的DataTransfer对象。

DragEvent(): 创建合成和不可信的 DragEvent.

事件类型

drag: 拖动元素或选择文本时触发此事件。
dragend: 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。
dragenter: 当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。
dragleave: 当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。
dragover: 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。
dragstart: 当用户开始拖动元素或选择文本时触发此事件。
drop: 当在有效放置目标上放置元素或选择文本时触发此事件。

全局事件处理

GlobalEventHandlers.ondrag: drag 事件的全局事件处理。
GlobalEventHandlers.ondragend: dragend 事件的全局事件处理。
GlobalEventHandlers.ondragenter: dragenter 事件的全局事件处理。
GlobalEventHandlers.ondragexit: dragleave 事件的全局事件处理。
GlobalEventHandlers.ondragover: dragover 事件的全局事件处理。
GlobalEventHandlers.ondragstart: dragstart 事件的全局事件处理。
GlobalEventHandlers.ondrop: drop 事件的全局事件处理。

示例

每个属性，构造函数，事件类型和全局事件处理程序的示例都包含在它们各自的参考页中。

规范

Specification
HTML # the-dragevent-interface

浏览器兼容性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2022年11月4日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content