The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not (either with native browser behavior or the HTML Drag and Drop API). This attribute is commonly used in the drag and drop operations.
Images and links are draggable by default. For other elements, you must set the ondragstart event.
You can use this attribute on any HTML element. It is a part of the Global Attributes.
The draggable attribute can have the following values:
- true: the element can be draggable.
- false: the element cannot be draggable.
- auto: drag is the default browser behavior.
Syntax
<tag draggable="true|false|auto"></tag>Example of the HTML draggable attribute:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
#rectId {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function drop(event) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
</script>
</head>
<body>
<div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="dragId" draggable="true" ondragstart="drag(event)">
This is a draggable paragraph. Drag this item to the rectangle.
</p>
</body>
</html>Practice Your Knowledge
What is true about the HTML draggable attribute?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.