New to Kendo UI for jQuery? Start a free 30-day trial

Draggable

configuration

Indicates whether the ListBox items can be dragged and dropped.

The draggable option allows you to drag and drop items within a single or across multiple ListBoxes. If your project requires the multiple-widget scenario, set the dropSources option on the target widgets. If your project requires the single-widget scenario, the dropSources option is not necessary.

If you set the draggable option to true, you also have to set selectable.

draggable

Boolean|Object

Default: false

<select id="listBoxA">
    <option>ItemA1</option>
    <option>ItemA2</option>
    <option>ItemA3</option>
</select>
<select id="listBoxB">
    <option>ItemB1</option>
    <option>ItemB2</option>
    <option>ItemB3</option>
</select>
<script>
$("#listBoxA").kendoListBox({
    draggable: true,
    selectable: "single",
    dropSources: ["listBoxB"]
});
$("#listBoxB").kendoListBox({
    draggable: true,
    selectable: "single",
    dropSources: ["listBoxA"]
});
</script>

draggable.enabled

Boolean

Indicates whether dragging is enabled.

Default: true

<select id="listBoxA">
    <option>ItemA1</option>
    <option>ItemA2</option>
</select>
<select id="listBoxB">
    <option>ItemB1</option>
    <option>ItemB2</option>
</select>

<script>
    $("#listBoxA").kendoListBox({
        draggable: true
    });

    $("#listBoxB").kendoListBox({
        dropSources: [ "listBoxA" ],
        draggable: {
            enabled: false,
            placeholder: function(element) {
                return element.clone().css({
                    "opacity": 0.3,
                    "border": "1px dashed #000000"
                });
            }
        }
    });
</script>

Provides an option to customize the draggable item hint. If a function is supplied, it receives a single argument - the jQuery object of the draggable element. If a hint is not provided, the ListBox clones the dragged item and uses it as a hint.

To avoid styling issues, note that the hint element is appended to the <body> tag.

<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
    draggable: {
        hint: function(element) {
            return $("<span></span>")
                .text(element.text())
                .css("color", "#FF0000");
        }
    },
    dataSource: [
        { name: "Item 1", id: 1 },
        { name: "Item 2", id: 2 }
    ],
    dataTextField: "name",
    dataValueField: "id"
});
</script>

draggable.placeholder

Function|String|jQuery

Provides an option to customize the item placeholder of the ListBox. If a function is supplied, it receives a single argument - the jQuery object of the draggable element. If a placeholder is not provided, the ListBox clones the dragged item, removes its id attribute, sets its visibility to hidden, and uses it as a placeholder.

The placeholder element is appended to the container of the ListBox.

<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
    draggable: {
        placeholder: function(element) {
            return element.clone().css({
                "opacity": 0.3,
                "border": "1px dashed #000000"
            });
        }
    },
    dataSource: [
        { name: "Item 1", id: 1 },
        { name: "Item 2", id: 2 }
    ],
    dataTextField: "name",
    dataValueField: "id"
});
</script>

Draggable

draggable

draggable.enabled

draggable.hint

draggable.placeholder