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.
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.
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.
Droppable
Enable any DOM element to be droppable, a target for draggable elements.
Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Set the values of the ui-droppable-hover
or ui-droppable-active
properties on the classes
option to specify the respective classes.
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.
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.
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
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.
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 :
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.
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.
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
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