#### jQuery UI - Interactions

Statistics Invoices Schedule

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