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.
Supported Tags
It supports all HTML elements.
Syntax
<element draggable = "true|false|auto">
Attribute Value
This attribute contains three values which are listed below:
Value | Description |
---|---|
true | Element is draggable. |
false | Element is not draggable. |
auto | Element’s draggable behavior follows browser default. |
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 Beginner </ p > </ center > </ body > </ html > |
Output:
Supported Browsers
The browser supported by draggable attribute are listed below:
Contact Us