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

Dragging and Dropping

To enable the drag-and-drop feature of the ListBox, set its draggable property to true.

You can also customize the drag-and-drop behavior of the widget by using its draggable.placeholder and draggable.hint options.

The ListBox does not support dragging and dropping for multiple selected items.

    <select id="listbox"></select>
            draggable: {
                hint: function(element) {
                    return $("<span></span>")
                        .css("color", "#FF0000");
                placeholder: function(element) {
                    return element.clone().css({
                        "opacity": 0.3,
                        "border": "1px dashed #000000"
            dataSource: [
                { name: "John", id: 1 },
                { name: "Jane", id: 2 },
                { name: "Jim", id: 3 },
                { name: "Tim", id: 4 },
                { name: "Mary", id: 5 }
            dataTextField: "name",
            dataValueField: "id"

See Also

In this article
Not finding the help you need? Improve this article