HTML ondragover 事件

在有效放置目标上拖动可拖动的元素或文本时，ondragover 事件触发。

实例

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>在两个矩形之间来回拖动p元素：</p>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p style="clear:both;" id="demo"></p>
<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
  event.preventDefault();
  document.getElementById("demo").innerHTML = "p 元素在目标位置之上";
  event.target.style.border = "4px dotted green";
}
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "p 元素被放下";
}
</script>
</body>
</html>

运行一下

浏览器支持

事件
ondragover	4	9	3.5	6	12

所有主流浏览器都支持 ondragover 事件。

定义和用法

在有效放置目标上拖动可拖动的元素或文本时，ondragover 事件触发。

默认情况下，不能在其他元素中删除数据/元素。为了允许删除，我们必须阻止元素的默认处理。这是通过调用ondragover属性的event.preventDefault（）方法来实现的。

注意：要使元素可拖动，请使用全局HTML5 draggable 属性。

提示：默认情况下链接和图像是可拖动的，不需要额外设置 draggable 属性。

下面是一些在拖放操作的不同阶段可能发生的事件：

在可拖动目标（源元素）上触发的事件：

ondragstart-当用户开始拖动元素时触发
ondrag-在拖动元素时触发
ondragend-当用户完成拖动元素时触发

对投放目标触发的事件：

ondragenter-当被拖动的元素进入放置目标时触发
ondragover-当拖动的元素位于放置目标上时触发
ondragleave-当拖动的元素离开放置目标时触发
ondrop-当拖动的元素放置在放置目标上时触发

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element ondragover="script">

属性值

值	描述
script	ondragover 发生时运行的脚本。

HTML ondragover 事件

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

分类导航