
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Execute a script when an element is being dragged over a valid drop target in HTML?
When an element is being dragged and dropped in HTML, the ondragover attribute fires.
Example
You can try to run the following code to implement the ondragover attribute −
<!DOCTYPE HTML> <html> <head> <style> .drag { float: left; width: 100px; height: 35px; border: 2px dashed #876587; margin: 15px; padding: 10px; } </style> </head> <body> <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"> <p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)" draggable = "true" id = "dragtarget">Drag!</p> </div> <div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div> <div id = "box"></div> <p>Drag the left box to the right or drag the right box to the left.</p> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function draggingNow(event) { document.getElementById("box").innerHTML = "Dragged successfully!"; } function dropNow(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); document.getElementById("box").innerHTML = "The element dropped successfully!"; } </script> </body> </html>
- Related Questions & Answers
- Execute a script when an element has been dragged to a valid drop target in HTML?
- Execute a script when the element is being dragged in HTML?
- Execute a script when the dragged element is being dropped in HTML?
- Execute a script when a mouse wheel is being scrolled over an element in HTML?
- Execute a script when the element is being clicked in HTML?
- Execute a script when the element is being double-clicked in HTML?
- Execute a script when an element's scrollbar is being scrolled in HTML?
- Execute a script when a mouse button is released over an element in HTML?
- Execute a script when a mouse pointer moves over an element in HTML?
- Execute a script when the content of the element is being cut in HTML?
- Execute a script when the content of the element is being copied in HTML?
- Execute a script when the browser window is being resized in HTML?
- Execute a script when the element is invalid in HTML?
- Which event occurs in JavaScript when the dragged element is over the target?
- Execute a script when the element is finished loading in HTML?
Advertisements