Posted By
Bajarangi soft ,
Posted On 29-09-2020
Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location.
Note: To make an element draggable, use the global HTML5 draggable attribute.
Links and images are draggable by default, and do not need the draggable attribute.
There are many events that are used, and can occur, in the different stages of a drag and drop operation:
Note: While dragging an element, the ondrag event fires every 350 milliseconds.
Example(1)
In HTML:
<style>
.droptarget {
float: left;
width: 200px;
height: 80px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<p>Drag and drop to another box</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2 ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</h2>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<h2 id="demo"></h2>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The h2 element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The h2 element was dropped";
}
</script>
In above example demonstrates how to assign an "ondragstart" and "ondrag" event to a p element and an "ondragover" and "ondrop" event to a div element.
Example(2)
In JavaScript:
<style>
.droptarget {
float: left;
width: 200px;
height: 80px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<div class="droptarget">
<h2 id="dragtarget" draggable="true">Drag me!</h2>
</div>
<div class="droptarget"></div>
<h2 id="demo"></h2>
<script>
/* Events fired on the drag target */
document.ondragstart = function(event) {
event.dataTransfer.setData("Text", event.target.id);
};
document.ondrag = function(event) {
document.getElementById("demo").innerHTML = "The h2 element is being dragged";
};
/* Events fired on the drop target */
document.ondragover = function(event) {
event.preventDefault();
};
document.ondrop = function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The h2 element was dropped";
}
};
</script>
In above example uses the HTML DOM to assign "ondragstart", "ondrag", "ondragover" and "ondrop" events to the document object.
Example(3)
In JavaScript, using the addEventListener() method:
<style>
.droptarget {
float: left;
width: 200px;
height: 80px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<div class="droptarget">
<p draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"></div>
<h2 id="demo"></h2>
<script>
/* Events fired on the drag target */
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
});
document.addEventListener("drag", function(event) {
document.getElementById("demo").innerHTML = "The h2 element is being dragged";
});
/* Events fired on the drop target */
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The h2 element was dropped";
}
});
</script>
In above example uses the addEventListener() method to attach "dragstart", "drag", "dragover" and "drop" events to the document object.
Example(4)
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<div class="droptarget">
<h2 draggable="true" id="dragtarget">Drag me!</h2>
</div>
<div class="droptarget"></div>
<h2 id="demo"></h2>
<script>
/* Events fired on the drag target */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the h2 element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the h2 element.";
event.target.style.opacity = "1";
});
/* Events fired on the drop target */
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
Complete code of Ondrag Event In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Use Ondrag Event In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1{
color: red;
}
.droptarget {
float: left;
width: 200px;
height: 80px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>Use Ondrag Event In JavaScript</h1>
</div>
<br>
<div class="well">
<p>Drag and drop to another box</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2 ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</h2>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<h2 id="demo"></h2>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The h2 element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "The h2 element was dropped";
}
</script>
</div>
</body>
</html>