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

Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAtoption 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 axisoption to limit the draggable's path to the x- or y-axis, or use the containmentoption to specify another parent.

You can use the handleoption to specify the jQuery selector of an element used to drag the object or prevent dragging. Use the canceloption 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 revertoption. If set to true the element will always revert. Also can be a string (validor invalid) or a function.

Layer functionality onto the draggable using the start, drag, and stopevents. Startis fired at the start of the drag; dragduring the drag; and stopwhen 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 acceptoption 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 revertoption. If set to truethe element will always revert. Also can be a string (validor 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 hoverClassor activeClassoptions 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 animateoption. 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 alsoResizeoption or get/set the alsoResizeoption 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 aspectRatiooption 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 forcePlaceholderSizeoption to set dimensions on the placeholder.

Sort items from one list into another by passing a selector into the connectWithoption. 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 itemsoption. 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 canceloption.

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrlkey 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.