jQuery UI API - Draggable Widget

Code examples:

Initialize the draggable with the specifiedaddClassesoption:

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

After initialization, get or set theaddClassesoption:

// getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
 
// setter
$( ".selector" ).draggable( "option", "addClasses", false );
    

Multiple types are supported:

• jQuery: A jQuery object containing the element to append the helper to.
• Element: The element to append the helper to.
• Selector: A selector specifying which element to append the helper to.
• String: String"parent"will cause the helper to be a sibling of the draggable.

Code examples:

Initialize the draggable with the specifiedappendTooption:

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

After initialization, get or set theappendTooption:

// getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
 
// setter
$( ".selector" ).draggable( "option", "appendTo", "body" );
    

Code examples:

Initialize the draggable with the specifiedaxisoption:

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

After initialization, get or set theaxisoption:

// getter
var axis = $( ".selector" ).draggable( "option", "axis" );
 
// setter
$( ".selector" ).draggable( "option", "axis", "x" );
    

Code examples:

Initialize the draggable with the specifiedcanceloption:

$( ".selector" ).draggable({ cancel: ".title" });
    

After initialization, get or set thecanceloption:

// getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
 
// setter
$( ".selector" ).draggable( "option", "cancel", ".title" );
    

Code examples:

Initialize the draggable with the specifiedconnectToSortableoption:

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

After initialization, get or set theconnectToSortableoption:

// getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
 
// setter
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );
    

Multiple types are supported:

• Selector: The draggable element will be contained within the bounds of the first element found by the selector. If no element is found, no containment will be set.
• Element: The draggable element will be contained within the bounds of the element.
• String: Possible values:"parent"、"document"、"window"。
• Array: An array, in the form[ x1, y1, x2, y2 ]defining the bounds of the element.

Code examples:

Initialize the draggable with the specifiedcontainmentoption:

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

After initialization, get or set thecontainmentoption:

// getter
var containment = $( ".selector" ).draggable( "option", "containment" );
 
// setter
$( ".selector" ).draggable( "option", "containment", "parent" );
    

Code examples:

Initialize the draggable with the specifiedcursoroption:

$( ".selector" ).draggable({ cursor: "crosshair" });
    

After initialization, get or set thecursoroption:

// getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
 
// setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
    

Code examples:

Initialize the draggable with the specifiedcursorAtoption:

$( ".selector" ).draggable({ cursorAt: { left: 5 } });
    

After initialization, get or set thecursorAtoption:

// getter
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
 
// setter
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
    

Code examples:

Initialize the draggable with the specifieddelayoption:

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

After initialization, get or set thedelayoption:

// getter
var delay = $( ".selector" ).draggable( "option", "delay" );
 
// setter
$( ".selector" ).draggable( "option", "delay", 300 );
    

Code examples:

Initialize the draggable with the specifieddisabledoption:

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

After initialization, get or set thedisabledoption:

// getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
 
// setter
$( ".selector" ).draggable( "option", "disabled", true );
    

Code examples:

Initialize the draggable with the specifieddistanceoption:

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

After initialization, get or set thedistanceoption:

// getter
var distance = $( ".selector" ).draggable( "option", "distance" );
 
// setter
$( ".selector" ).draggable( "option", "distance", 10 );
    

Code examples:

Initialize the draggable with the specifiedgridoption:

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

After initialization, get or set thegridoption:

// getter
var grid = $( ".selector" ).draggable( "option", "grid" );
 
// setter
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] );
    

Code examples:

Initialize the draggable with the specifiedhandleoption:

$( ".selector" ).draggable({ handle: "h2" });
    

After initialization, get or set thehandleoption:

// getter
var handle = $( ".selector" ).draggable( "option", "handle" );
 
// setter
$( ".selector" ).draggable( "option", "handle", "h2" );
    

Multiple types are supported:

• String: If set to"clone", the element will be cloned and the clone will be dragged.
• Function: A function that will return a DOMElement to use while dragging.

Code examples:

Initialize the draggable with the specifiedhelperoption:

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

After initialization, get or set thehelperoption:

// getter
var helper = $( ".selector" ).draggable( "option", "helper" );
 
// setter
$( ".selector" ).draggable( "option", "helper", "clone" );
    

Multiple types are supported:

• Boolean: When set totrue, a transparent overlay will be placed over all iframes on the page.
• Selector: Any iframes matching the selector will be covered by a transparent overlay.

Code examples:

Initialize the draggable with the specifiediframeFixoption:

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

After initialization, get or set theiframeFixoption:

// getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
 
// setter
$( ".selector" ).draggable( "option", "iframeFix", true );
    

Code examples:

Initialize the draggable with the specifiedopacityoption:

$( ".selector" ).draggable({ opacity: 0.35 });
    

After initialization, get or set theopacityoption:

// getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
 
// setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );
    

Code examples:

Initialize with the specifiedrefreshPositionsoptions for the draggable:

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

Get or set therefreshPositionsoption after initialization:

// getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
 
// setter
$( ".selector" ).draggable( "option", "refreshPositions", true );
    

Supports multiple types:

• Boolean: If set totrue, the element always reverts.
• String: If set to"invalid", revert occurs only when the draggable is not placed on a droppable; if set to"valid"the opposite occurs.
• Function: A function that determines whether the element reverts to its starting position. The function must returntruefor the element to revert.

Code examples:

Initialize with the specifiedrevertoptions for the draggable:

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

Get or set therevertoption after initialization:

// getter
var revert = $( ".selector" ).draggable( "option", "revert" );
 
// setter
$( ".selector" ).draggable( "option", "revert", true );
    

Code examples:

Initialize with the specifiedrevertDurationoptions for the draggable:

$( ".selector" ).draggable({ revertDuration: 200 });
    

Get or set therevertDurationoption after initialization:

// getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
 
// setter
$( ".selector" ).draggable( "option", "revertDuration", 200 );
    

Code examples:

Initialize with the specifiedscopeoptions for the draggable:

$( ".selector" ).draggable({ scope: "tasks" });
    

Get or set thescopeoption after initialization:

// getter
var scope = $( ".selector" ).draggable( "option", "scope" );
 
// setter
$( ".selector" ).draggable( "option", "scope", "tasks" );
    

Code examples:

Initialize with the specifiedscrolloptions for the draggable:

$( ".selector" ).draggable({ scroll: false });
    

Get or set thescrolloption after initialization:

// getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
 
// setter
$( ".selector" ).draggable( "option", "scroll", false );
    

Code examples:

Initialize with the specifiedscrollSensitivityoptions for the draggable:

$( ".selector" ).draggable({ scrollSensitivity: 100 });
    

Get or set thescrollSensitivityoption after initialization:

// getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 );
    

Code examples:

Initialize with the specifiedscrollSpeedoptions for the draggable:

$( ".selector" ).draggable({ scrollSpeed: 100 });
    

Get or set thescrollSpeedoption after initialization:

// getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSpeed", 100 );
    

Supports multiple types:

• Boolean: When set totrue, the element snaps to other draggable elements.
• Selector: A selector specifying which elements to snap to.

Code examples:

Initialize with the specifiedsnapoptions for the draggable:

$( ".selector" ).draggable({ snap: true });
    

Get or set thesnapoption after initialization:

// getter
var snap = $( ".selector" ).draggable( "option", "snap" );
 
// setter
$( ".selector" ).draggable( "option", "snap", true );
    

Code examples:

Initialize with the specifiedsnapModeoptions for the draggable:

$( ".selector" ).draggable({ snapMode: "inner" });
    

Get or set thesnapModeoption after initialization:

// getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
 
// setter
$( ".selector" ).draggable( "option", "snapMode", "inner" );
    

Code examples:

Initialize with the specifiedsnapToleranceoptions for the draggable:

$( ".selector" ).draggable({ snapTolerance: 30 });
    

Get or set thesnapToleranceoption after initialization:

// getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
 
// setter
$( ".selector" ).draggable( "option", "snapTolerance", 30 );
    

Code examples:

Initialize with the specifiedstackoptions for the draggable:

$( ".selector" ).draggable({ stack: ".products" });
    

Get or set thestackoption after initialization:

// getter
var stack = $( ".selector" ).draggable( "option", "stack" );
 
// setter
$( ".selector" ).draggable( "option", "stack", ".products" );
    

Code examples:

Initialize with the specifiedzIndexoptions for the draggable:

$( ".selector" ).draggable({ zIndex: 100 });
    

Get or set thezIndexoption after initialization:

// getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
 
// setter
$( ".selector" ).draggable( "option", "zIndex", 100 );
    

• This method does not accept any arguments.

Code examples:

Invoke the destroy method:

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

• This method does not accept any arguments.

Code examples:

Invoke the disable method:

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

• This method does not accept any arguments.

Code examples:

Invoke the enable method:

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

• optionName
  Type: String
  Description: The name of the option to get.

Code examples:

Invoke the method:

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
    

• This method does not accept any arguments.

Code examples:

Invoke the method:

var options = $( ".selector" ).draggable( "option" );
    

• optionName
  Type: String
  Description: The name of the option to set.
• value
  Type: Object
  Description: The value to set for the option.

Code examples:

Invoke the method:

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

• options
  Type: Object
  Description: A map of option-value pairs to set.

Code examples:

Invoke the method:

$( ".selector" ).draggable( "option", { disabled: true } );
    

• This method does not accept any arguments.

Code examples:

Invoke the widget method:

var widget = $( ".selector" ).draggable( "widget" );
    

• event
  Type: Event
• ui
  Type: Object

Note:uiThe object is empty, but included for consistency with other events.

Code examples:

Initialize the draggable with the specified create callback:

$( ".selector" ).draggable({
  create: function( event, ui ) {}
});
    

Bind an event listener to the dragcreate event:

$( ".selector" ).on( "dragcreate", function( event, ui ) {} );
    

• event
  Type: Event
• ui
  Type: Object
  • helper
    Type: jQuery
    Description: The jQuery object representing the draggable helper.
  • position
    Type: Object
    Description: The current CSS position of the helper, e.g., an{ top, left }object.
  • offset
    Type: Object
    Description: The current offset position of the helper, e.g., an{ top, left }object.

Code examples:

Initialize the draggable with the specified drag callback:

$( ".selector" ).draggable({
  drag: function( event, ui ) {}
});
    

Bind an event listener to the drag event:

$( ".selector" ).on( "drag", function( event, ui ) {} );
    

• event
  Type: Event
• ui
  Type: Object
  • helper
    Type: jQuery
    Description: The jQuery object representing the draggable helper.
  • position
    Type: Object
    Description: The current CSS position of the helper, e.g., an{ top, left }object.
  • offset
    Type: Object
    Description: The current offset position of the helper, e.g., an{ top, left }object.

Code examples:

Initialize the draggable with the specified start callback:

$( ".selector" ).draggable({
  start: function( event, ui ) {}
});
    

Bind an event listener to the dragstart event:

$( ".selector" ).on( "dragstart", function( event, ui ) {} );
    

• event
  Type: Event
• ui
  Type: Object
  • helper
    Type: jQuery
    Description: The jQuery object representing the helper being dragged.
  • position
    Type: Object
    Description: The current CSS position of the helper, such as{ top, left }object.
  • offset
    Type: Object
    Description: The current offset position of the helper, such as{ top, left }object.

Code examples:

Initialize the draggable with the specified stop callback:

$( ".selector" ).draggable({
  stop: function( event, ui ) {}
});
    

Bind an event listener to the dragstop event:

$( ".selector" ).on( "dragstop", function( event, ui ) {} );