Last Updated : 11 Jul, 2025
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 TagsIt 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 ExamplesExample: 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>GeeksforGeeks</h1>
<h2>draggable attribute</h2>
<div class="dropbox" ondrop="droppoint(event)"
ondragover="allowDropOption(event)">
</div>
<p id="drag1"
draggable="true"
ondragstart="dragpoint(event)">
GeeksforGeeks: A computer science portal for geeks
</p>
</center>
</body>
</html>
Output:
draggable attribute Example output Supported BrowsersThe browser supported by draggable attribute are listed below:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4