Categories
HTML Web development

HTML draggable Attribute

HTML draggable Attribute

The HTML draggable attribute defines whether an element is draggable or not.

The HTML draggable attribute can be used on all HTML elements.

Example:

<!DOCTYPE HTML>
<html>
<head>
<style>
#dropzone {
  width: 300px;
  height: 100px;
  padding: 10px;
  border: 1px solid #333;
}
</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="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="draggable-element" draggable="true" ondragstart="drag(event)">Drag this paragraph into the rectangle.</p>

</body>
</html>

Output:


Drag this paragraph into the rectangle.


Enjoy coding!

Read also:

HTML Attributes

HTML JavaScript

HTML tags