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.

jQuery UI: Introduction

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

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

jQuery UI is built for designers and developers alike.

Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.