HTML DRAG/DROP
HTML Drag and Drop is a feature that allows you to implement draggable and droppable elements in a web page. It enables users to interact with elements by dragging them from one location and dropping them onto another location, triggering actions or updating the interface accordingly. HTML Drag and Drop is typically implemented using a combination of HTML attributes and JavaScript event handlers.
Here's a basic example to demonstrate HTML Drag and Drop:
html
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Example</title>
<style>
.drag-element {
width: 100px;
height: 100px;
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: move;
}
.drop-target {
width: 200px;
height: 200px;
background-color: #f9f9f9;
border: 2px dashed #ccc;
text-align: center;
padding: 20px;
}
</style>
<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="dragElement" class="drag-element" draggable="true"
ondragstart="drag(event)">Drag me!</div>
<div id="dropTarget" class="drop-target" ondrop="drop(event)"
ondragover="allowDrop(event)">Drop here!</div>
</body>
</html>In this example, there are two elements: a draggable element with the id "dragElement" and a droppable target with the id "dropTarget." The draggable element has the `draggable` attribute set to "true" and an `ondragstart` event handler attached to the `drag()` function. The droppable target has the `ondragover` event handler attached to the `allowDrop()` function and the `ondrop` event handler attached to the `drop()` function.
When the user starts dragging the draggable element, the `drag()` function is triggered and sets the data to be transferred using `event.dataTransfer.setData()`. In this case, the element's id is set as the data.
When the user hovers over the droppable target, the `allowDrop()` function is triggered and calls `event.preventDefault()` to allow the drop operation.
When the user drops the draggable element onto the droppable target, the `drop()` function is triggered. It prevents the default behavior of the drop event with `event.preventDefault()` and retrieves the transferred data using `event.dataTransfer.getData()`. The function then appends the dragged element to the droppable target using `event.target.appendChild()`.
This is a basic example, and you can further enhance it by adding additional event handlers or modifying the behavior to suit your specific needs.
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.