HTML draggable Global Attribute

Description

The global attribute draggable determines whether the user can drag this item or not. Links and images can be dragged by default.

Syntax

<element draggable="true | false | auto">

Values

trueIndicates that the item can be dragged.
falseIndicates that the item cannot be dragged.
autoUses browser settings.

Example

HTML

<!DOCTYPE html>
<html>
<head>
<title>Global Attribute draggable</title>
<style> 
#happy_div {
   width: 100px;
   padding: 15px;
   font-weight: 900;
   border: 1px solid red;
}
span {
   cursor: pointer;
}
</style>
</head>
   <body>
      <p>Make up the word happy (moving letters to the window):</p>
<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>
   <div id="happy_div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <br>
   <span id="test1" draggable="true" ondragstart="drag(event)">А</span>
   <span id="test2" draggable="true" ondragstart="drag(event)">P</span>
   <span id="test3" draggable="true" ondragstart="drag(event)">H</span>
   <span id="test4" draggable="true" ondragstart="drag(event)">Y</span>
   <span id="test5" draggable="true" ondragstart="drag(event)">P</span>
   </body>
</html>

Result