New to Telerik UI for ASP.NET Core? Start a 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.

Razor
    <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>
Razor
     <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    <kendo-sortable name="sortable" placeholder="placeholderCustom" >
    </kendo-sortable>

    <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.

Razor

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

    @(Html.Kendo().Sortable()
        .For("#sortable")
        .Placeholder("<li>Drop Here!</li>")
    )
Razor
     <ul id="sortable">
        <li>ItemA1</li>
        <li>ItemA2</li>
        <li>ItemA3</li>
    </ul>

    <kendo-sortable name="sortable" placeholder="placeholderHtml" >
    </kendo-sortable>

    <script>
        function placeholderHtml(element) {
            return "<li>Drop Here!</li>"
        }
    </script>

Placeholder

See Also