New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Placeholder

You can change the default placeholder of the Sortable by setting the placeholder configuration option.

The following example demonstrates how to build the placeholder from the dragged element.

    <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    @(Html.Kendo().Sortable()
        .For("#sortable")
        .PlaceholderHandler("placeholderCustom")
    )

    <script>
        function placeholderCustom(element) {
            return element.clone().css({
                "opacity": 0.3,
                "border": "1px dashed #000000"
            });
        }
    </script>

The following example demonstrates how to build a static placeholder.


    <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    @(Html.Kendo().Sortable()
        .For("#sortable")
        .Placeholder("<li>Drop Here!</li>")
    )

See Also

In this article