Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | draggable Attribute

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 02 Jun, 2022
Improve Article
Save Article

This attribute is used to specify whether an element is draggable or not. Links and images are by default draggable. The draggable attribute is often used in the drag and drop operations.

Supported Tags: It supports all HTML elements. 

Syntax: 

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

Attribute Value: This attribute contains three value which are listed below: 

  • true: This value represents the element is draggable.
  • false: This value represents the element is not draggable.
  • auto: This value represents the uses of the default browser.

Example: 

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) {
                var 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: 
Before dragging: 
 

After dragging and drop 
 

Supported Browsers: The browser supported by draggable attribute are listed below: 

  • Google Chrome 
  • Edge 12 and above
  • Internet Explorer 
  • Firefox 2 and above
  • Opera 12.0 and above
  • Safari 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!