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.

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.