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

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>

See Also

In this article
Not finding the help you need? Improve this article