You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitUserDrag

webkitUserDrag style property

Browser support:
Specifies or retrieves whether the element is draggable.
In Firefox, use the draggable property for similar functionality.

Syntax:

object.webkitUserDrag;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: -webkit-user-drag

Possible values:

The type of this property is string.
 One of the following values: 
auto
Browser determines whether the element is draggable or not.
element
The element itself is draggable instead of its contents.
inherit
Takes the value of this property from the computed style of the parent element.
none
Default. Element is not draggable.
Default: none.

Example HTML code 1:

This example illustrates the use of the -webkit-user-drag 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;
        }
    </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

Example HTML code 2:

This example illustrates the use of the webkitUserDrag property in JavaScript:
<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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content