HTML | ondragover Event Attribute
The ondragover event attribute will trigger if a draggable element or text is being dragged to a valid drop target. To drag an element garb that element and drag it to the drag point. Here we will use the global HTML 5 draggable attribute. The data and elements can’t be dropped. To allow a drop, you have to call the event.preventDefault() method. It is new in HTML 5 does not support below versions of HTML. Note: Images and link are draggable by default. Attributes:
- Events triggers on the draggable target:
- ondragstart: It triggers when the user begin to drag an element.
- ondrag: It triggers when an element is being dragged.
- ondragend: It triggers when the user is no more dragging the element.
- Events triggers on the drop target:
- ondragenter: This will trigger when the dragged element enters the drop target.
- ondragover: This will trigger when the dragged element is over the drop target.
- ondragleave: This will trigger when the dragged element leaves the drop target.
- ondrop: This will trigger when the dragged element has been dropped on the drop target.
Syntax:
<element ondragover="script">
Attribute Values: It contains single value script which holds the script to be run on ondragover event. Example:
html
<!DOCTYPE HTML> < html > < head > < title >HTML ondragover event attribute</ title > < style > .box { width: 250px; height: 100px; margin: 15px; padding: 5px; border: 2px solid black; color: Green; } </ style > < script > /* Function of start drag content */ function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } /* Function of allow drop content */ function allowDrop(event) { event.preventDefault(); document.getElementById("demo").innerHTML = "The element is OVER the droptarget."; event.target.style.border = "3px solid green"; } /* Function of drop content */ function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); document.getElementById("demo").innerHTML = "The element was dropped."; } </ script > </ head > < body > < center > < p > Drag the element from top box and drop at bottom box </ p > < div class="box"> < h1 ondragstart="dragStart(event)" draggable="true" id="dragtarget"> w3wiki </ h1 > </ div > < div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"> </ div > < p style="clear:both;"></ p > < p id="demo"></ p > </ center > </ body > </ html > |
Output:
- Before dragging the element:
- After dropping the element:
Supported Browsers: The browser supported by ondragover event attribute are listed below:
- Google Chrome 4.0
- Internet Explorer/ Edge 9.0
- Firefox 3.5
- Opera 12.0
- Safari 6.0