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
Not finding the help you need? Improve this article