jQuery UI interactions

  1. Home
  2. jQuery UI
  3. 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
Drag
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.

Accept
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

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.

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. 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 :

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
  7. 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

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.

  • 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