W3docs
en
Log in

HTML draggable Attribute

The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not. Read and see on what elements it can be used.

The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not (either with native browser behavior or the HTML Drag and Drop API). This attribute is commonly used in the drag and drop operations.

Images and links are draggable by default. For other elements, you must set the ondragstart event handler to initiate a drag and use event.dataTransfer. You can also use draggable="false" to explicitly disable dragging for images and links.

You can use this attribute on any HTML element. It is a part of the Global Attributes.

The draggable attribute can have the following values:

  • true: the element can be draggable.
  • false: the element cannot be draggable.
  • auto: drag is the default browser behavior.

Syntax

Syntax of HTML draggable Attribute

<tag draggable="true|false|auto"></tag>

Example of the HTML draggable attribute:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #rectId {
        width: 350px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script>
      function allowDrop(event) {
        event.preventDefault(); // Allow dropping
      }
      function drag(event) {
        // Store the dragged element's ID in the dataTransfer object
        event.dataTransfer.setData("Text", event.target.id);
      }
      function drop(event) {
        var data = event.dataTransfer.getData("Text"); // Retrieve the ID
        event.target.appendChild(document.getElementById(data));
        event.preventDefault();
      }
    </script>
  </head>
  <body>
    <div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <p id="dragId" draggable="true" ondragstart="drag(event)">
      This is a draggable paragraph. Drag this item to the rectangle.
    </p>
  </body>
</html>

Note: For modern development, it is recommended to use addEventListener instead of inline event handlers.

Try it Yourself isn't available for this example.

Practice

Practice

What is true about the HTML draggable attribute?