YouTip

## Category (#) ## Usage **Description:** Allows elements to be moved using the mouse. **Added in version:** 1.0 **Dependencies:** **Note:** Makes the selected elements draggable. If you want not just dragging, but drag & drop, see the (#), which provides a drop target for draggable elements. ### Quick Navigation | Options | Methods | Events | | --- | --- | --- | | (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) | (#) (#) (#) (#) | | Option | Type | Description | Default | | --- | --- | --- | --- | | addClasses | Boolean | If set to `false`, will prevent the `ui-draggable` class from being added. This is useful for performance optimization when calling `.draggable()` on hundreds of elements. **Code example:** Initialize a draggable with the specified `addClasses` option: $( ".selector" ).draggable({ addClasses: false }); After initialization, get or set the `addClasses` option: // gettervar addClasses = $( ".selector" ).draggable( "option", "addClasses" ); // setter $( ".selector" ).draggable( "option", "addClasses", false ); | true | | appendTo | jQuery or Element or Selector or String | Which element the draggable helper should be appended to while dragging. **Multiple types supported:** * **jQuery**: A jQuery object containing the element the helper should be appended to. * **Element**: The element to append the helper to. * **Selector**: A selector specifying which element to append the helper to. * **String**: The string `"parent"` will cause the helper to be a sibling of the draggable. **Code example:** Initialize a draggable with the specified `appendTo` option: $( ".selector" ).draggable({ appendTo: "body" }); After initialization, get or set the `appendTo` option: // gettervar appendTo = $( ".selector" ).draggable( "option", "appendTo" ); // setter $( ".selector" ).draggable( "option", "appendTo", "body" ); | "parent" | | axis | String | Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: `"x"`, `"y"`. **Code example:** Initialize a draggable with the specified `axis` option: $( ".selector" ).draggable({ axis: "x" }); After initialization, get or set the `axis` option: // gettervar axis = $( ".selector" ).draggable( "option", "axis" ); // setter $( ".selector" ).draggable( "option", "axis", "x" ); | false | | cancel | Selector | Prevents dragging from starting on specified elements. **Code example:** Initialize a draggable with the specified `cancel` option: $( ".selector" ).draggable({ cancel: ".title" }); After initialization, get or set the `cancel` option: // gettervar cancel = $( ".selector" ).draggable( "option", "cancel" ); // setter $( ".selector" ).draggable( "option", "cancel", ".title" ); | "input, textarea, button, select, option" | | connectToSortable | Selector | Allows the draggable to be dropped onto a specified sortable. If used with this option, a draggable can be dropped onto a sortable list and then become part of that list. Note: The `helper` option must be set to `"clone"` for this to work properly. Requires the (#). **Code example:** Initialize a draggable with the specified `connectToSortable` option: $( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); After initialization, get or set the `connectToSortable` option: // gettervar connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" ); // setter $( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" ); | false | | containment | Selector or Element or String or Array | Constrains dragging to within the bounds of the specified element or region. **Multiple types supported:** * **Selector**: The draggable element will be contained within the first element matched by the selector. If no element is found, no containment is set. * **Element**: The draggable element will be contained within the element. * **String**: Possible values: `"parent"`, `"document"`, `"window"`. * **Array**: An array defining the boundaries of the element in the form `[ x1, y1, x2, y2 ]`. **Code example:** Initialize a draggable with the specified `containment` option: $( ".selector" ).draggable({ containment: "parent" }); After initialization, get or set the `containment` option: // gettervar containment = $( ".selector" ).draggable( "option", "containment" ); // setter $( ".selector" ).draggable( "option", "containment", "parent" ); | false | | cursor | String | The CSS cursor during the drag operation. **Code example:** Initialize a draggable with the specified `cursor` option: $( ".selector" ).draggable({ cursor: "crosshair" }); After initialization, get or set the `cursor` option: // gettervar cursor = $( ".selector" ).draggable( "option", "cursor" ); // setter $( ".selector" ).draggable( "option", "cursor", "crosshair" ); | "auto" | | cursorAt | Object | Sets the offset of the draggable helper relative to the mouse cursor. Coordinates can be given as a hash with one or two keys: `{ top, left, right, bottom }`. **Code example:** Initialize a draggable with the specified `cursorAt` option: $( ".selector" ).draggable({ cursorAt: { left: 5 } }); After initialization, get or set the `cursorAt` option: // gettervar cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); // setter $( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); | false | | delay | Number | Time in milliseconds after mousedown until dragging should start. This option can prevent unwanted drags when clicking on an element. **Code example:** Initialize a draggable with the specified `delay` option: $( ".selector" ).draggable({ delay: 300 }); After initialization, get or set the `delay` option: // gettervar delay = $( ".selector" ).draggable( "option", "delay" ); // setter $( ".selector" ).draggable( "option", "delay", 300 ); | 0 | | disabled | Boolean | If set to `true`, disables the draggable. **Code example:** Initialize a draggable with the specified `disabled` option: $( ".selector" ).draggable({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).draggable( "option", "disabled" ); // setter $( ".selector" ).draggable( "option", "disabled", true ); | false | | distance | Number | Distance in pixels that the mouse must move before dragging should start. This option can prevent unwanted drags when clicking on an element. **Code example:** Initialize a draggable with the specified `distance` option: $( ".selector" ).draggable({ distance: 10 }); After initialization, get or set the `distance` option: // gettervar distance = $( ".selector" ).draggable( "option", "distance" ); // setter $( ".selector" ).draggable( "option", "distance", 10 ); | 1 | | grid | Array | Snaps the draggable helper to a grid, every x and y pixels. The array must be in the form `[ x, y ]`. **Code example:** Initialize a draggable with the specified `grid` option: $( ".selector" ).draggable({ grid: [ 50, 20 ] }); After initialization, get or set the `grid` option: // gettervar grid = $( ".selector" ).draggable( "option", "grid" ); // setter $( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); | false | | handle | Selector or Element | If specified, restricts dragging from starting unless the mousedown occurs on the specified element. Only descendant elements of the draggable element will be allowed to be dragged. **Code example:** Initialize a draggable with the specified `handle` option: $( ".selector" ).draggable({ handle: "h2" }); After initialization, get or set the `handle` option: // gettervar handle = $( ".selector" ).draggable( "option", "handle" ); // setter $( ".selector" ).draggable( "option", "handle", "h2" ); | false | | helper | String or Function() | Allows for a helper element to be used for dragging display. **Multiple types 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 be used while dragging. **Code example:** Initialize a draggable with the specified `helper` option: $( ".selector" ).draggable({ helper: "clone" }); After initialization, get or set the `helper` option: // gettervar helper = $( ".selector" ).draggable( "option", "helper" ); // setter $( ".selector" ).draggable( "option", "helper", "clone" ); | "original" | | iframeFix | Boolean or Selector | Prevents iframes from capturing mousemove events during dragging. Useful in conjunction with the `cursorAt` option or when the mouse cursor is not over the helper. **Multiple types supported:** * **Boolean**: When set to `true`, transparent overlays will be placed over all iframes on the page. * **Selector**: Any iframes matching the selector will be covered with transparent overlays. **Code example:** Initialize a draggable with the specified `iframeFix` option: $( ".selector" ).draggable({ iframeFix: true }); After initialization, get or set the `iframeFix` option: // gettervar iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ); // setter $( ".selector" ).draggable( "option", "iframeFix", true ); | false | | opacity | Number | The opacity of the helper while dragging. **Code example:** Initialize a draggable with the specified `opacity` option: $( ".selector" ).draggable({ opacity: 0.35 }); After initialization, get or set the `opacity` option: // gettervar opacity = $( ".selector" ).draggable( "option", "opacity" ); // setter $( ".selector" ).draggable( "option", "opacity", 0.35 ); | false | | refreshPositions | Boolean | If set to `true`, all droppable positions are calculated on every mousemove. Note: This solves highly dynamic situations, but degrades performance significantly. **Code example:** Initialize a draggable with the specified `refreshPositions` option: $( ".selector" ).draggable({ refreshPositions: true }); After initialization, get or set the `refreshPositions` option: // gettervar refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" ); // setter $( ".selector" ).draggable( "option", "refreshPositions", true ); | false | | revert | Boolean or String or Function() | Whether the element should revert to its starting position when dragging stops. **Multiple types supported:** * **Boolean**: If set to `true`, the element will always revert. * **String**: If set to `"invalid"`, revert will only occur if the draggable was not dropped on a droppable, and vice-versa if set to `"valid"`. * **Function**: A function that determines whether the element should revert to its starting position. The function must return `true` to revert the element. **Code example:** Initialize a draggable with the specified `revert` option: $( ".selector" ).draggable({ revert: true }); After initialization, get or set the `revert` option: // gettervar revert = $( ".selector" ).draggable( "option", "revert" ); // setter $( ".selector" ).draggable( "option", "revert", true ); | false | | revertDuration | Number | The duration of the revert animation, in milliseconds. Ignored if the `revert` option is `false`. **Code example:** Initialize a draggable with the specified `revertDuration` option: $( ".selector" ).draggable({ revertDuration: 200 }); After initialization, get or set the `revertDuration` option: // gettervar revertDuration = $( ".selector" ).draggable( "option", "revertDuration" ); // setter $( ".selector" ).draggable( "option", "revertDuration", 200 ); | 500 | | scope | String | Used to group draggable and droppable items, in addition to the droppable's `accept` option. A draggable with the same `scope` value as a droppable will be accepted by that droppable. **Code example:** Initialize a draggable with the specified `scope` option: $( ".selector" ).draggable({ scope: "tasks" }); After initialization, get or set the `scope` option: // gettervar scope = $( ".selector" ).draggable( "option", "scope" ); // setter $( ".selector" ).draggable( "option", "scope", "tasks" ); | "default" | | scroll | Boolean | If set to `true`, the container will auto-scroll while dragging. **Code example:** Initialize a draggable with the specified `scroll` option: $( ".selector" ).draggable({ scroll: false }); After initialization, get or set the `scroll` option: // gettervar scroll = $( ".selector" ).draggable( "option", "scroll" ); // setter $( ".selector" ).draggable( "option", "scroll", false ); | true |