Cursor
The cursor
configuration option determines the type of cursor that will be displayed while the user drags 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>
<script>
$("#sortable").kendoSortable({
cursor: "move"
});
</script>
The cursor
option changes the cursor style only for the time while the item is dragged. If you want to change the cursor type on hover
, use CSS.
<ul id="sortable">
<li>ItemA1</li>
<li>ItemA2</li>
<li>ItemA3</li>
</ul>
<script>
$("#sortable").kendoSortable({
cursor: "url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default"
});
</script>
<style>
#sortable li {
cursor: url('https://demos.telerik.com/kendo-ui//content/web/sortable/grabbing.cur'), default;
}
</style>