HTML draggable Attribute

Last Updated : 07 Mar, 2024

The HTML draggable attribute allows elements to be dragged and dropped within or between web pages. When set to “true”, elements become draggable, facilitating interactive user experiences such as drag-and-drop functionality in web applications.

Supported Tags

It supports all HTML elements.

Syntax

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

Attribute Value

This attribute contains three values which are listed below:

Value	Description
true	Element is draggable.
false	Element is not draggable.
auto	Element’s draggable behavior follows browser default.

HTML draggable Attribute Examples

Example: In this example we creates a draggable element within a dropbox. The draggable attribute is set to true, enabling the element to be dragged and dropped. JavaScript functions handle drag and drop events.

HTML

<!DOCTYPE HTML>
<html>
 
<head>
    <title>draggable attribute</title>
    <style>
        .dropbox {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
        h1 {
            color:green;
        }
    </style>
    <script>
        function droppoint(event) {
            let data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            event.preventDefault();
        }
        function allowDropOption(event) {
            event.preventDefault();
        }
        function dragpoint(event) {
            event.dataTransfer.setData("Text", event.target.id);
        }
    </script>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>draggable attribute</h2>
        <div class="dropbox"
             ondrop="droppoint(event)"
             ondragover="allowDropOption(event)">
        </div>
        <p id="drag1"
           draggable="true"
           ondragstart="dragpoint(event)">
            GeeksforGeeks: A computer science portal for geeks
        </p>
    </center>
</body>
 
</html>

Output:

draggable attribute Example output

Supported Browsers

The browser supported by draggable attribute are listed below:

Suggest improvement

HTML | download Attribute

HTML | dropzone Attribute

Share your thoughts in the comments