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>
    <script>
        $("#listbox").kendoListBox({
            draggable: {
                hint: function(element) {
                    return $("<span></span>")
                        .text(element.text())
                        .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"
        });
    </script>

See Also

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