You are here: Reference > HTML > attributes > draggable

draggable attribute

Browser support:
3.55
Sets whether an element is draggable.
Note: The draggable attribute is supported in Firefox from version 3.5 and in Safari from version 5.
By default, anchor and img elements and text selections are draggable in Firefox. You can modify this behavior with the draggable attribute. Use the draggable attribute together with the ondragstart event to enable dragging. See the example below for details.
In Google Chrome and Safari, use the -webkit-user-drag style property for similar functionality.
JavaScript page for this attribute: draggable. You can find other example(s) there.

Possible values:

Boolean, one of the following values:
false
Element is not draggable.
true
Element is draggable.
Default: The default value is true for anchor and img elements and false for other elements.

Example HTML code 1:

This example illustrates the use of the draggable attribute:
<head> 
    <style>
        .dragTest {
            width:150px;
            height:80px;
            background-color:#e0f0e0;
        }
    </style> 
    <script type="text/javascript">
        function OnDragStart (event) {
            event.dataTransfer.setData ("text/plain", event.target.textContent);
            return true;
        }
    </script> 
</head> 
<body>
    The first division element is draggable, the second one is not. Try to drag the first one and drop it into the text field.
    <br /><br />
    Division 1.
    <div class="dragTest" style="-webkit-user-drag: element; -webkit-user-select:none;" 
        draggable="true" ondragstart="return OnDragStart (event)">A draggable division element.</div>
    <br /><br />
    Division 2.
    <div class="dragTest" 
        ondragstart="return false;">A non-draggable division element.</div>
    <br /><br />
    Text field:<br />
    <textarea rows="5"></textarea>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

User Contributed Comments

Post Content

Post Content