jQuery UI interactions

Draggable

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Default Functionality

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Drag

Constrain Movement

Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

Vert

Horz

Both

Cursor Style

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.

Move

Crosshair

Help

Events

Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

Start x

Drag x

Stop x

Handles

Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object. Or prevent dragging when the cursor is over a specific element (or group of elements) using cancel option.

Text

Element

Cancel

Revert Positions

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option.

Original

Helper

Droppable

Enable any DOM element to be droppable, a target for draggable elements.

Default Functionality

Enable any DOM element to be droppable, a target for draggable elements.

Drag

Drop Here

Accept Drop

Specify using the accept option which element (or group of elements) is accepted by the target droppable.

Reject

Drop Here

Revert draggable position

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option set on the draggable.

Revert

Drop

Drop Here

Visual Feedback

Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Set the values of the ui-droppable-hover or ui-droppable-active properties on the classes option to specify the respective classes.

Drag

On Hover

On Activating Draggable

Resizable

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

Resize

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

Resize

Animate

Animate the resize action using the animate option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.

Resize

Constrain Resize Area

Define the boundaries of the resizable area. Use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

Resize

Preserve Aspect Ratio

Display only an outline of the element while resizing by setting the helper option to a CSS class.

Resize

Selectable

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

Default Functionality

Default

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Serialize

Write a function that fires on the stop event to collect the index values of selected items. Present values as feedback, or pass as a data string.

You have selected :

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Sortable

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Simple Examples

Default

Item 1
Item 2
Item 3
Item 4
Item 5

Drop Placeholder

When dragging a sortable item to a new location, other items will make room for the that item by shifting to allow white space between them. Pass a class into the placeholder option to style that space to be visible. Use the boolean forcePlaceholderSize option to set dimensions on the placeholder.

Item 1
Item 2
Item 3
Item 4
Item 5

Advance Examples

Connect Lists

Sort items from one list into another and vice versa, by passing a selector into the connectWith option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function (i.e., connectWith: '.myclass').

Item 1
Item 2
Item 3
Item 4
Item 5

Item 1
Item 2
Item 3
Item 4
Item 5

Include / Exclude items

Specify which items are eligible to sort by passing a jQuery selector into the items option. Items excluded from this option are not sortable, nor are they valid targets for sortable items. To only prevent sorting on certain items, pass a jQuery selector into the cancel option. Cancelled items remain valid sort targets for others.

Item 1
not sortable or a drop target
not sortable or a drop target
Item 4

Item 1
not sortable
not sortable
Item 4