- 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 the dragged element is being dropped in HTML?
The ondrop attribute triggers when the dragged element is being dropped in HTML.
Example
You can try to run the following code to implement ondrop 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>
Published on 14-Mar-2018 08:33:26
- Related Questions & Answers
- Execute a script when the element is being dragged in HTML?
- Execute a script when an element is being dragged over a valid drop target 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 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 an element's scrollbar is being scrolled in HTML?
- Execute a script when the element is invalid in HTML?
- Execute a script when a mouse wheel is being scrolled over an element in HTML?
- Which event occurs in JavaScript when a dragged element is dropped?
- Execute a script when the element is finished loading in HTML?
- Execute a script when an element has been dragged to a valid drop target in HTML?
- Execute a script when the element loses focus in HTML?
- Execute a script when the element gets focus in HTML?
Advertisements