jQuery UI & Draggable: Cursor Style

This entry is part 11 of 11 in the series jQuery UI Draggable

jQuery UI Draggable – Cursor style

To allow elements to move with the mouse, we can set the cursor style of the mouse.

Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).

Customize the cursor’s appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.

<!doctype html>
    <title>jQuery UI Draggable - Cursor style</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        #draggable, #draggable2, #draggable3 {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        $(function () {
            $('#draggable').draggable({ cursor: 'move', cursorAt: { top: 56, left: 56 } });
            $('#draggable2').draggable({ cursor: 'pointer', cursorAt: { top: -5, left: -5 } });
            $('#draggable3').draggable({ cursor: 'crosshair', cursorAt: { bottom: 5 } });

<div id='draggable' class='ui-widget-content'>
    <p>I will always stick to the center (relative to the mouse)</p>

<div id='draggable2' class='ui-widget-content'>
    <p>My cursor is at left -5 and top -5</p>

<div id='draggable3' class='ui-widget-content'>
    <p>My cursor position is only controlled for the 'bottom' value</p>

Try The Code

Here I am using move, pointer and crosshair style.

Series Navigation<< jQuery UI & Draggable: Handles