JavaScript Reference Manual
/ondrop 事件
ondrop 事件
ondrop事件
实例
在两个矩形框中来回拖动 p 元素:
拖动我!
注意：Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。
运行实例 »
点击 "运行实例" 按钮查看在线实例
本文底部包含了更多实例。
定义和用法
ondrop 事件在可拖动元素或选取的文本放置在目标区域时触发。
拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。
注意：为了让元素可拖动，需要使用 HTML5draggable 属性。
提示：链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件(源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
浏览器支持
注意：在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。
| 事件 | |||||
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
语法
HTML 中：
<
elementondrop="
myScript">尝试一下
JavaScript 中：
object.ondrop=function(){
myScript};尝试一下
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("drop",
myScript);尝试一下
注意：Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | Yes |
| 事件类型: | DragEvent |
| 支持的 HTML 标签: | All HTML elements |
更多实例
实例
在两个矩形框中来回拖动 p 元素:
拖动我!
注意：Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。
运行实例 »
点击 "运行实例" 按钮查看在线实例
相关页面
HTML 教程: HTML5 拖放
HTML 参考手册: HTML draggable 属性