Draggable
Allow elements to be moved using the mouse
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. Draggable area is limited to this panel using containment option.

Drag
Drag
Drag
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 (specify a pixel value from the top, right, bottom, and/or left).

Move
Crosshair
Bottom
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 another parent.

Both
Vertical
Horizontal
Handles

You can use the handle option to specify the jQuery selector of an element used to drag the object or prevent dragging. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.

Text
Exception
Revert position

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option. If set to true the element will always revert. Also can be a string (valid or invalid) or a function.

Element
Clone
Speed
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. Drag the circles to see events in action.

Start 0x
Drag 0x
Stop 0x
Droppable
Create targets for draggable elements
Default functionality

Enable any DOM element to be droppable, a target for draggable elements. This is a very basic example with default options, to see it in action simply drag grey circle and drop to the blue one. Callback is included.

Drag me
Drop here
Accept drop

Specify using the accept option which element (or group of elements) is accepted by the target droppable. Can be either a selector indicating which draggable elements are accepted or a function.

Accept
Not accept
Drop here
Revert draggable position

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option. If set to true the element will always revert. Also can be a string (valid or invalid) or a function.

On drop
Except 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). Use the hoverClass or activeClass options to specify respective classes.

Drag me
When active
On hover
Resizable
Change the size of an element using the mouse
Default functionality

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height. To see resizable in action simply drag resizable handle on bottom right corner.

Resize me
Animated resize

Animate the resize action using the animate option. When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop. Supports easing and duration options.

Resize me
Synchronous resize

Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the alsoResize option or get/set the alsoResize option after initialization. Try to resize any block.

Resize me
Resize me
Preserve aspect ratio

Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the aspectRatio option to true, and optionally pass in a new ratio (i.e., 4/3). Here aspect ratio is set to 16/9.

Resize me
Sortable
Reorder elements using the mouse
Default functionality

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

To fill the empty room for a sortable item, 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
Connect list

Sort items from one list into another 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.

  • List 1 item 1
  • List 1 item 2
  • List 1 item 3
  • List 1 item 4
  • List 1 item 5
  • List 2 item 1
  • List 2 item 2
  • List 2 item 3
  • List 2 item 4
  • List 2 item 5
Include/exclude items

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

  • List 1 item 1
  • Not sortable or a drop target
  • Not sortable or a drop target
  • List 1 item 4
  • List 1 item 5
  • List 2 item 1
  • Not sortable
  • Not sortable
  • List 2 item 4
  • List 2 item 5
Selectable
Use the mouse to select elements
Default functionality

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. Styles are for demo purposes only.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Serialize
Selected: none

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. Select one or more items to see the callback values on top right corner.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5