Loading Please Wait...
HTML drag and drop API is used to pick an HTML element and drop it to a different location (HTML element). Any HTML can be dragged and dropped.
<!DOCTYPE html>
<html>
<head>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="dragContainer"
style="width: 250px; height: 70px; padding: 5px; border: 1px solid #ff0000;">
<img src="logo.png"
id="dragElement" draggable="true" ondragstart="drag(event)" width="240" height="60">
</div>
<br>
<div id="dropContainer" ondrop="drop(event)" ondragover="allowDrop(event)"
style="width: 250px; height: 70px; padding: 5px; border: 1px solid #00ff00;">
</div>
</body>
</html>
Step 1: Make an element draggable.
Step 2: What to do with dragged element.
Step 3: Specify drop element.
Step 4: Now drop it.
To make an element draggable use draggable attribute.
<img draggable="true">
Now, we need to specify what should happen when the element is dragged. use ondragstart attribute
Here we call a method drag(event) which specify the data to be dragged (image in this example).
Then dataTransfer.setData() method set the data type and value of dragged element (Data is text and value is the id of image in this example).
<img ondragstart="drag(event)">
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
Now, we need to specify the drop element where the dragged element should be dropped. use ondragover attribute
By default every dragged elements can not be dropped and browser open the dragged element as a link when dropped.
Here we define allowDrop(event) which preventing the default behavior of the drop by using preventDefault()
<div ondragover="allowDrop(event)">
function allowDrop(event) {
event.preventDefault();
}
Now, we drop the element. Use ondrop attribute
By default every dragged elements can not be dropped and browser open the dragged element as a link when dropped.
Here we define drop(event) which get the dragged element by dataTransfer.getData() method and add this element to drop container by appendChild() method.
<div ondrop="drop(event)">
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data))
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved