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

Browser Support

Desktop

Yes	12	Yes	2	12	Yes

Tablets / Mobile

Yes	Yes	4	Yes	Yes	Yes

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu