HTML draggable Attribute: This defines whether an element is draggable or not. Links and images are by default draggable. The draggable attribute is often used in the drag and drop operations.
HTML draggable Attribute
This attribute can be applied to all the HTML elements.
Attribute Value: It contains three value which is listed below:
true: This value represents the element is draggable.
false: This value represents the element is not draggable.
auto: This value represents the uses of the default browser.
Syntax: <element draggable = “true|false|auto”>
Browser Support
This attribute is supported by the following browsers:
- Chrome – 4.0
- Firefox – 3.5
- Safari – 6.0
- Opera – 12.0
- Internet Explorer – 9.0
Example: for draggable attribute
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">Drag this paragraph into the rectangle.</p>
</body>
</html>
Output:
BEFORE
AFTER
