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.
<!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:
