In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > draggable

draggable property

Browser support:

	3.5		5

Sets or retrieves whether an element is draggable.

Note: The draggable property 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 property. Use the draggable property together with the ondragstart event to enable dragging. See the example below for details.

In Google Chrome and Safari, use the webkitUserDrag style property for similar functionality.

Syntax:

object.draggable;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: draggable

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the draggable property:

<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;
        }

        function ToggleDraggable (cbox) {
            var firstDiv = document.getElementById ("firstDiv");
            if (cbox.checked) {
                firstDiv.draggable = true;
                firstDiv.ondragstart = OnDragStart;
                firstDiv.style.webkitUserDrag = "element";
            }
            else {
                firstDiv.draggable = false;
                firstDiv.ondragstart = null;
                firstDiv.style.webkitUserDrag = "none";
            }
        }

    </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.
    You can set whether the first division is draggable with the 'Draggable' checkbox.
    <br /><br />
    Division 1.
    <div id="firstDiv" class="dragTest" style="-webkit-user-drag: element; -webkit-user-select:none;" 
        draggable="true" ondragstart="return OnDragStart (event)">A draggable division element.</div>

    <input type="checkbox" onclick="ToggleDraggable (this)" checked="checked"/>Draggable
    <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>