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.
Supported Tags: It supports all HTML rags.
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:
HTML
<!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 content */ 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 1.0
- Edge 12.0
- Internet Explorer 9.0
- Mozilla Firefox 9.0
- Safari 3.1
- Opera 12.0
Please Login to comment...