html5事件以及使用实例,HTML ondragover事件用法及代码示例

当将可拖动元素拖动到有效放置区上时，将发生HTML DOM ondragover事件。

注意：链接和图像默认是可拖动的。

在拖放操作的不同阶段中使用并发生了一些事件：

在可拖动目标上触发的事件：

ondragstart：开始拖动元素时发生。

ondrag：出现在元素拖动时。

ondragend：发生在元素拖动完成时。

在投放目标上触发的事件：

ondragenter：出现在被拖动的元素进入放置目标时。

ondragover：出现在被拖动的元素在放置目标上方时。

ondragleave：出现在被拖动元素从放置目标离开时。

ondrop：出现在将拖动的元素放到放置目标上时发生。

注意：ondragover事件在拖动元素时每350毫秒触发一次。

用法:

在HTML中：

在JavaScript中：

object.ondragover = function(){myScript};

在JavaScript中，使用addEventListener()方法：

object.addEventListener("dragover", myScript);

例：使用HTML。

#droptarget {

float:center;

width:300px;

height:50px;

margin:20px;

margin-top:30px;

padding:5px;

border:6px solid green;

}

GeeksforGeeks

HTML DOM ondragover Event

draggable="true"

id="dragtarget">

Draggable element

οndrοp="dropEle(event)"

οndragοver="allowDropEle(event)">

function dragStartEle(event) {

event.dataTransfer.setData(

"Text", event.target.id);

}

function allowDropEle(event) {

event.preventDefault();

document.getElementById(

"try").innerHTML =

"Element is over the dropzone";

event.target.style.border = "6px dotted green";

}

function dropEle(event) {

event.preventDefault();

var data =

event.dataTransfer.getData("Text");

event.target.appendChild(

document.getElementById(data));

document.getElementById(

"try").innerHTML = "Dragging finished";

}

输出：

例：使用JavaScript

#droptarget {

float:center;

width:300px;

height:50px;

margin:20px;

margin-top:30px;

padding:5px;

border:6px solid green;

}

GeeksforGeeks

HTML DOM ondragover Event

id="dragtarget">

Draggable element

var drag = document.getElementById(

"dragtarget");

var drop = document.getElementById(

"droptarget");

// Events fired on the drag target

drag.ondragstart = function(event) {

event.dataTransfer.setData(

"Text", event.target.id);

};

drag.ondrag = function(event) {

document.getElementById(

"demo").innerHTML =

"Dragging starts";

};

// Events fired on the drop target

drop.ondragover = function(event) {

event.preventDefault();

document.getElementById(

"demo").innerHTML =

"Element is over the dropzone";

event.target.style.border =

"6px dotted green";

};

drop.ondrop = function(event) {

event.preventDefault();

var data =

event.dataTransfer.getData("Text");

event.target.appendChild(

document.getElementById(data));

document.getElementById(

"demo").innerHTML = "Dragging finished";

};

输出：

支持的浏览器：下面列出了HTML DOM ondragover Event支持的浏览器：

谷歌浏览器4.0

Internet Explorer 9.0

Firefox 3.5

苹果Safari 6.0

Opera 12.0