jQuery UI Draggable

jQuery UI Draggable lets an element be moved with the pointer. It can be restricted to an axis or container, snapped to a grid, connected to Sortable, or combined with Droppable.

Drag the yellow box around this page.

Basic Draggable Top ↑

$( function () {
    $( "#draggable" ).draggable();
});

<div id="draggable">Drag me</div>

Basic Draggable demo →

Draggable Options Top ↑

addClasses

Controls whether the ui-draggable class is added. Setting it to false can reduce class work when many elements are draggable.

$( "#draggable" ).draggable({
    addClasses: false
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "addClasses" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "addClasses",
    false
);

Open demo →

appendTo

Controls where a helper element is appended. It matters when helper is not the original element.

$( "#draggable" ).draggable({
    appendTo: "body"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "appendTo" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "appendTo",
    "body"
);

Open demo →

axis

Restricts movement to the horizontal or vertical axis.

$( "#draggable" ).draggable({
    axis: "x"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "axis" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "axis",
    "x"
);

Open demo →

cancel

Prevents dragging from starting on matching descendants such as form controls or links.

$( "#draggable" ).draggable({
    cancel: ".no-drag"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "cancel" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "cancel",
    ".no-drag"
);

Open demo →

connectToSortable

Lets a draggable be dropped into a compatible jQuery UI Sortable list.

$( "#draggable" ).draggable({
    connectToSortable: "#sortable"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "connectToSortable" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "connectToSortable",
    "#sortable"
);

Open demo →

containment

Restricts movement inside a parent, document, window, element, selector or coordinate box.

$( "#draggable" ).draggable({
    containment: "parent"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "containment" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "containment",
    "parent"
);

Open demo →

Open demo →

Open demo →

Open demo →

cursor

Changes the pointer while dragging.

$( "#draggable" ).draggable({
    cursor: "move"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "cursor" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "cursor",
    "move"
);

Open demo →

cursorAt

Offsets the helper relative to the pointer.

$( "#draggable" ).draggable({
    cursorAt: { left: 10, top: 10 }
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "cursorAt" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "cursorAt",
    { left: 10, top: 10 }
);

Open demo →

delay

Historically delayed the start of dragging after pointer-down.

$( "#draggable" ).draggable({
    delay: 300
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "delay" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "delay",
    300
);

Open demo →

disabled

Disables the draggable when set to true.

$( "#draggable" ).draggable({
    disabled: true
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "disabled" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "disabled",
    true
);

Open demo →

distance

Historically required the pointer to move a minimum number of pixels before dragging began.

$( "#draggable" ).draggable({
    distance: 10
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "distance" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "distance",
    10
);

Open demo →

grid

Snaps movement to an x/y grid.

$( "#draggable" ).draggable({
    grid: [20, 20]
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "grid" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "grid",
    [20, 20]
);

Open demo →

handle

Allows dragging to begin only from a matching handle inside the element.

$( "#draggable" ).draggable({
    handle: ".drag-handle"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "handle" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "handle",
    ".drag-handle"
);

Open demo →

helper

Controls whether the original element or a clone/custom helper is dragged.

$( "#draggable" ).draggable({
    helper: "clone"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "helper" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "helper",
    "clone"
);

Open demo →

iframeFix

Places overlays over iframes during dragging to avoid pointer-capture problems in legacy iframe-heavy layouts.

$( "#draggable" ).draggable({
    iframeFix: true
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "iframeFix" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "iframeFix",
    true
);

Open demo →

opacity

Changes helper opacity while dragging.

$( "#draggable" ).draggable({
    opacity: 0.5
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "opacity" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "opacity",
    0.5
);

Open demo →

refreshPositions

Recalculates droppable positions on every pointer move. This can help highly dynamic layouts but costs performance.

$( "#draggable" ).draggable({
    refreshPositions: true
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "refreshPositions" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "refreshPositions",
    true
);

Open demo →

revert

Returns the draggable to its starting position after drag completion. Values can include true, false, valid or invalid.

$( "#draggable" ).draggable({
    revert: true
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "revert" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "revert",
    true
);

Open demo →

revertDuration

Controls the duration of the revert animation in milliseconds.

$( "#draggable" ).draggable({
    revertDuration: 300
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "revertDuration" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "revertDuration",
    300
);

Open demo →

scope

Groups compatible Draggable/Droppable interactions. A draggable and droppable must share a scope to interact.

$( "#draggable" ).draggable({
    scope: "files"
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "scope" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "scope",
    "files"
);

Open demo →

scroll

Allows the page/container to scroll automatically while dragging near an edge.

$( "#draggable" ).draggable({
    scroll: true
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "scroll" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "scroll",
    true
);

Open demo →

scrollSensitivity

Sets the distance from a scroll edge at which automatic scrolling starts.

$( "#draggable" ).draggable({
    scrollSensitivity: 40
});

Read the current option:

const value =
    $( "#draggable" ).draggable( "option", "scrollSensitivity" );

Set the option after initialization:

$( "#draggable" ).draggable(
    "option",
    "scrollSensitivity",
    40
);

Open demo →

Draggable Methods Top ↑

destroy()

Completely remove Draggable behavior and restore the element to its pre-widget state.

$( "#draggable" ).draggable( "destroy" );

Open demo →

disable()

Temporarily prevent the element from being dragged.

$( "#draggable" ).draggable( "disable" );

Open demo →

enable()

Re-enable a previously disabled draggable.

$( "#draggable" ).draggable( "enable" );

Open demo →

Draggable Events Top ↑

create

Fires when the Draggable interaction is initialized.

$( "#draggable" ).draggable({
    create: function ( event, ui ) {
        console.log( "create" );
    }
});

Open demo →

drag

Fires repeatedly while the element is being dragged.

$( "#draggable" ).draggable({
    drag: function ( event, ui ) {
        console.log( "drag" );
    }
});

The ui.position and ui.offset objects can be used to display current coordinates.

Open demo →

start

Fires when dragging begins.

$( "#draggable" ).draggable({
    start: function ( event, ui ) {
        console.log( "start" );
    }
});

Open demo →

stop

Fires when dragging ends.

$( "#draggable" ).draggable({
    stop: function ( event, ui ) {
        console.log( "stop" );
    }
});

Open demo →

Continue to Droppable →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: