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.

EditPreviewOpen In Dojo

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