Draggable
Allow elements to be moved using the mouseDefault 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.
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).
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.
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.
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.
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.
Droppable
Create targets for draggable elementsDefault 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.
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.
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.
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.
Resizable
Change the size of an element using the mouseDefault 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.
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.
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.
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.
Sortable
Reorder elements using the mouseDefault 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 elementsDefault 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
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