The draggable attribute in HTML specifies whether an element can be dragged.
Definition and Usage
➔ The draggable attribute has the following values and behaviors:
- true: The element is draggable.
- false: The element is not draggable.
- auto: Only text selections, images <img>, and links <a> are draggable other elements are not draggable.
Syntax
//In HTML
<div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
<span id="dragitemid" draggable="true" ondragstart="dragstart(event)">
Drag me!
</span>
</div>
<div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
<i id="drop-msg-id">Drop here</i>
</div>
//In Javascript
let element = document.querySelector("#dragitemid");
element.draggable=true;
element.draggable=false;
element.setAttribute('draggable', 'false');
element.setAttribute('draggable', 'true');
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| draggable | Global Attributes |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML draggable attribute example</title>
<style>
.box {
height: 100px;
width: 120px;
margin: 15px;
border: 1px solid #aaaaaa;
float: left;
/* Align horizontally and vertically */
text-align: center;
align-content: center;
/* Align horizontally and vertically */
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
}
.box span {
background: rgb(100, 100, 100, 0.3);
border: 2px solid black;
padding: 10px;
}
i {
border: 2px solid red;
padding: 42px 25px;
}
</style>
</head>
<body>
<h3>HTML draggable attribute example</h3>
<p>The draggable attribute specifies whether an element can be dragged</p>
<div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
<span id="dragitemid" draggable="true" ondragstart="dragstart(event)">
Drag me!
</span>
</div>
<div class="box" ondrop="dropHandler(event)" ondragover="allowdragover(event)">
<i id="drop-msg-id">Drop here</i>
</div>
<script>
//Create a div element
let div = document.createElement('div');
function dragstart(ev) {
//transfer object id
ev.dataTransfer.setData("dragitemid", ev.target.id);
//get dragging item parent node;
div = ev.target.parentNode;
}
function allowdragover(ev) {
// allow drop
ev.preventDefault();
}
function dropHandler(ev) {
//Get the drop message element
const child = document.getElementById("drop-msg-id");
//Get the Drop-over-node div reference, put to parentNode
const parentNode = ev.target.parentNode;
//add the drop-msg-item to the dragging-item-parant node
div.appendChild(child);
// Get the dragged element id
const data = ev.dataTransfer.getData("dragitemid");
// Append the dragged element to the drop target
parentNode.append(document.getElementById(data));
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.