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>
<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.
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable")
.Placeholder("<li>Drop Here!</li>")
)
<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>