HTML draggable Attribute Examples
Example: In this example we creates a draggable element within a dropbox. The draggable attribute is set to true, enabling the element to be dragged and dropped. JavaScript functions handle drag and drop events.
HTML
<!DOCTYPE HTML><html><head> <title>draggable attribute</title> <style> .dropbox { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } h1 { color:green; } </style> <script> function droppoint(event) { let data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); event.preventDefault(); } function allowDropOption(event) { event.preventDefault(); } function dragpoint(event) { event.dataTransfer.setData("Text", event.target.id); } </script></head><body> <center> <h1>w3wiki</h1> <h2>draggable attribute</h2> <div class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)"> </div> <p id="drag1" draggable="true" ondragstart="dragpoint(event)"> w3wiki: A computer science portal for geeks </p> </center></body></html> |
Output:
draggable attribute Example output
HTML draggable Attribute
The HTML draggable attribute allows elements to be dragged and dropped within or between web pages. When set to “true”, elements become draggable, facilitating interactive user experiences such as drag-and-drop functionality in web applications.