HTML | draggable Attribute

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.

Syntax:

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

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

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

Example:

<!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 draging:

After draging and drop

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

Google Chrome 4.0
Internet Explorer 9.0
Firefox 3.5
Opera 12.0
Safari 6.0

My Personal Notes

Jul	AUG	Sep
	17
2018	2019	2020

Suggest a Topic

Recommended Posts: