Open In App

HTML draggable Attribute

Last Updated : 11 Jul, 2025
Comments
Improve
Suggest changes
2 Likes
Like
Report

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: 

ValueDescription
trueElement is draggable.
falseElement is not draggable.
autoElement'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: 

drab_att1
draggable attribute Example output

Supported Browsers

The browser supported by draggable attribute are listed below:


V

vijay_raj
Improve
Article Tags :

Explore

Lightbox