HTML | ondragleave Event Attribute
The ondragleave attribute works when a draggable element or text selection leaves a valid drop target. It helps in dragging the elements and is entering or leaving a drop target. Drag and drop feature is very popular in HTML 5. Use CSS property when the element is draggable and enter into the drop target.
Syntax:
<element ondragleave = "script">
Attribute Value: The ondragleave event attribute contains single value script which works when ondragleave event called.
Note: Images and links are by default draggable.
Example:
<!DOCTYPE HTML> < html > < head > < title >ondragleave event attribute</ title > < style > .droptarget { width: 250px; height: 100px; margin: 15px; padding: 5px; border: 2px solid black; color:Green; } </ style > < script > /* Function to start drag contenr */ function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } /* Function to dragenter event */ function dragEnter(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "2px solid green"; document.getElementById("demo").innerHTML = "Dropzone"; } } /* Function to dragleave event */ function dragLeave(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; document.getElementById("demo").innerHTML = "Out of Dropzone"; } } /* Function to allow drop content */ function allowDrop(event) { event.preventDefault(); } /* Function to drop content */ function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); } </ script > </ head > < body > < center > < h1 > Drag the element between the boxes </ h1 > <!-- Drag and drop event starts with ondragleave events --> < div class = "droptarget" ondrop = "drop(event)" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondragover = "allowDrop(event)" > < h1 ondragstart = "dragStart(event)" draggable = "true" id = "dragtarget" > GeeksforGeeks </ h1 > </ div > < div class = "droptarget" ondragenter = "dragEnter(event)" ondragleave = "dragLeave(event)" ondrop = "drop(event)" ondragover = "allowDrop(event)" > </ div > <!-- Drag and drop events ends --> < p style = "clear:both;" ></ p > < p id = "demo" ></ p > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by ondragleave event attributes are listed below:
- Google Chrome 4.0
- Internet Explorer 9.0
- Mozila Firefox 3.5
- Safari 6.0
- Opera 12.0
Recommended Posts:
- HTML | DOM ondragleave Event
- HTML | onreset Event Attribute
- HTML | onresize Event Attribute
- HTML | onunload Event Attribute
- HTML | ondrop Event Attribute
- HTML | ondragstart Event Attribute
- HTML | onmouseover Event Attribute
- HTML | onkeyup Event Attribute
- HTML | onkeydown Event Attribute
- HTML | ondrag Event Attribute
- HTML | oninvalid Event Attribute
- HTML | ondragover Event Attribute
- HTML | ondragenter Event Attribute
- HTML | onsubmit Event Attribute
- HTML | onmouseout Event Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.