HTML draggable Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The draggable HTML global attribute specifies whether an element is draggable or not. It can be applied to any HTML element, but it has no effect on SVG elements.

The draggable attribute can have two values:

true: The element can be dragged.
false: The element cannot be dragged.

If the draggable attribute is not set, its default value is auto. This means that the drag behavior will be the default browser behavior: only text selections, images, and links can be dragged. For other elements, the ondragstart event must be set for drag and drop to work.

The draggable attribute is often used in drag and drop operations, where users can drag elements from one location to another. For example, you could use the draggable attribute to create a drag-and-drop list of items, or to allow users to move elements around on a canvas.

Here is an example of how to use the draggable attribute:

<div draggable="true">
  <p>This element can be dragged.</p>
</div>

When the user hovers over this element, they will see a cursor that indicates that the element can be dragged. If the user clicks and holds on the element, they can drag it to a new location.

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>