Dragging and Dropping

To enable the drag-and-drop feature of the ListBox, set it as Draggable() and configure its .Draggable().DropSources("dropSourceId") option.

You can also customize the drag-and-drop appearance of the ListBox by using its Draggable.Placeholder and Draggable.Hint templates which accept the name of a JavaScript function.

@(Html.Kendo().ListBox()
    .Name("selected")
    .Draggable(draggable => draggable
        .Placeholder("customPlaceholder")
        .Hint("customHint")
        )
    .DropSources(new string[]{ "dropSourceId", "anotherDropSourceId" })
    .ConnectWith("#optional")
    .BindTo(new List<CustomerViewModel>())
)
<script>
    function customPlaceholder(draggedItem) {
        return draggedItem
            .clone()
            .addClass("custom-placeholder");
    }

    function customHint(draggedItem) {
        return draggedItem
            .clone()
            .addClass("custom-hint");
    }
</script>

See Also

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