ondragover事件

     
  
把我拖动到矩形框中！
 
 
 
注意：Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。
 
   

本文底部包含了更多实例。

定义和用法

ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。

默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。

拖放是 HTML5 中非常常见的功能。 更多信息可以查看我们 HTML 教程中的 HTML5 拖放。

注意：为了让元素可拖动，需要使用 HTML5draggable 属性。

提示：链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

• 在拖动目标上触发事件(源元素):
  • ondragstart - 用户开始拖动元素时触发
  • ondrag - 元素正在拖动时触发
  • ondragend - 用户完成元素拖动后触发


• 释放目标时触发的事件:
  • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

注意：在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

语法

HTML 中：

JavaScript 中：

JavaScript 中, 使用 addEventListener() 方法:

注意：Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

     
  
在两个矩形框中来回拖动 p 元素:
 
 
拖动我!
 
 
 
注意：Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。
 
   

相关页面

HTML 教程: HTML5 拖放

HTML 参考手册: HTML draggable 属性