ondragover event
Definition and usage
The ondragover event occurs when a draggable element or text selection is dragged to a valid drop target.
By default, data/elements cannot be deleted from other elements. To allow placement, we must prevent the element's default handling. This is achieved by calling the event.preventDefault() method of the ondragover event.
Drag-and-drop is a very common feature in HTML5. It is when you 'grab' an object and drag it to a different location. For more information, read our article about HTML5 drag and dropHTML tutorial.
Note:To make an element draggable, use the global HTML5 draggable attribute。
Tip:By default, links and images are draggable and do not require the draggable attribute.
Many events are used at different stages of the drag-and-drop operation, and may occur:
Events triggered on the draggable target (source element):
- ondragstart - Occurs when the user starts dragging the element
- ondrag - Occurs when the element is dragged
- ondragend - Occurs when the user finishes dragging the element
Events triggered on the target:
- ondragenter - Occurs when the dragged element enters the target
- ondragover - Occurs when the dragged element is on the target
- ondragleave - Occurs when the dragged element leaves the target
- ondrop - Occurs when the dragged element is placed on the target
Note:The ondragover event is triggered every 350 milliseconds when dragging the element.
Example
Execute JavaScript when the element is dropped on the target:
<div ondragover="myFunction(event)"></div>
More TIY examples are at the bottom of the page.
Syntax
In HTML:
<element ondragover="myScript">
In JavaScript:
object.ondragover = function(){myScript};
In JavaScript, use the addEventListener() method:
object.addEventListener("dragover", myScript;
Note:Internet Explorer 8 or earlier versions do not support addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
更多实例
所有可能的拖放事件的演示：
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()方法设置被拖拽数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
/* ----------------- Gebeurtenissen die worden getriggerd op het plaatsingsdoel ----------------- */
// Wanneer het dragbare p-element de droptarget binnenkomt, verander de stijl van de rand van de DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Standaard is het niet mogelijk om gegevens/elementen in andere elementen te plaatsen. Om plaatsen mogelijk te maken, moeten we de standaardverwerking van het element blokkeren
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Wanneer het dragbare p-element de droptarget verlaat, reset de stijl van de rand van de DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Bij neerzetten - voorkom de standaardverwerking van de browser voor gegevens (standaard openen als koppeling bij neerzetten)
reset de kleur van de tekst en de randkleur van de DIV
gebruik de methode dataTransfer.getData() om de gegevens die worden gesleept op te halen
de gegevens die worden gesleept zijn de id van het gesleepte element ("drag1")
het element dat wordt gesleept wordt toegevoegd aan het element waarop wordt neergezet
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
