Cursor
The cursor configuration option determines the type of cursor that will be displayed while the user is dragging a sortable item.
For the full list of built-in cursor types, refer to quirksmode.org.
Avoid using a custom cursor in Internet Explorer. Due to the browser specifics in custom icon rendering, using a custom cursor may lead to performance issues.
The following example demonstrates how to change the cursor type to "move".
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable")
.Cursor("move")
)
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
<kendo-sortable name="sortable" cursor="move" >
</kendo-sortable>
The cursor option changes the style of the cursor only for the time the item is dragged. To change the cursor type on hover, use CSS.
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
@(Html.Kendo().Sortable()
.For("#sortable")
.Cursor("url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default")
)
<style>
#sortable li {
cursor: url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default;
}
</style>
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
<kendo-sortable name="sortable" cursor="url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default" >
</kendo-sortable>
<style>
#sortable li {
cursor: url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default;
}
</style>