ondragover event
Examples
When the element is being dragged into the drop target trigger:
try it"
Bottom of this article contains more examples.
Definition and Usage
ondragover event fires when a draggable element or selected text being dragged into the drop target.
By default, data / elements can not be placed into other elements. If you want to achieve change function, we need to prevent default processing element method. We can call event.preventDefault () method to achieve ondragover event.
HTML5 Drag and Drop is a very common feature. For more information see our HTML tutorial HTML5 drag and drop .
Note: To make the element draggable, you need to use the HTML5 draggable with property.
Tip: The default links and images are draggable, no draggable attribute.
Drag and drop process will trigger the following events:
- Trigger event (source element) on the Drag Target:
- ondragstart - triggered when the user starts dragging elements
- ondrag - the element being dragged trigger
- ondragend - triggered after the user completes the drag element
- Releasing the target trigger events:
- OnDragEnter - This event is fired when the mouse is dragged object into its container range
- ondragover - This event is triggered when an object is dragged drag object container in another range
- OnDragLeave - This event is fired when the mouse is dragged away from the object within its container range
- onDrop - in a dragging, release the mouse button when you trigger this event
Note: When you drag the elements, every 350 milliseconds triggers ondragover event.
Browser Support
Figures in the table represent the first browser to support this version of events.
event | |||||
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
grammar
In HTML:
In JavaScript:
JavaScript, use the addEventListener () method:
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
Whether to support the bubble: | Yes |
---|---|
It can be canceled: | Yes |
Event Type: | DragEvent |
Supported HTML tags: | All HTML elements |
More examples
Examples
The following example demonstrates all of the drag and drop events:
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () method to set the data type and drag data
event.dataTransfer.setData ( "Text", event.target.id);
// Output some text while dragging p element
. Document.getElementById ( "demo") innerHTML = "start dragging p element.";
// Modify the transparency of the drag element
event.target.style.opacity = "0.4";
});
// P drag element at the same time, change the color of text output
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// End p element output when dragging some text elements and reset transparency
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "complete p drag element";
event.target.style.opacity = "1";
});
/ * After the completion of the drag trigger * /
// Complete the drag element when p enter droptarget, border styles change div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "3px dotted red";
}
});
// By default, data / elements can not be dragged and dropped in other elements. For drop We must prevent default processing elements
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// When drag and drop the p elements leave droptarget, reset div border styles
document.addEventListener ( "dragleave", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
/ * For drop, prevent default processing data browser (in the drop link is enabled by default)
Reset output border color and text color of the DIV
Use dataTransfer.getData () method to get dropped data
Mop data element id ( "drag1")
Additional elements to the drag drop element * /
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));
}
});
try it"
Related Pages
HTML Tutorial: the HTML5 Drag and Drop
HTML Reference Manual: HTML attribute draggable with
Event objects