### jQuery UI interactions

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

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

Drag
Drag
Drag

#### 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 a parent DOM element or a jQuery selector, like 'document.'

Vert
Horz
Both

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

Move
Crosshair
Help

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

Start x
Drag x
Stop x

#### Handles

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.

Text
Element
Cancel

#### Revert Positions

Return the draggable (or it's helper) to its original location when dragging stops with the boolean `revert` option.

Original
Helper

#### Droppable

Enable any DOM element to be droppable, a target for draggable elements.

#### Default Functionality

Enable any DOM element to be droppable, a target for draggable elements.

Drag
Drop Here

#### Accept Drop

Specify using the `accept` option which element (or group of elements) is accepted by the target droppable.

Accept
Reject
Drop Here

#### Revert draggable position

Return the draggable (or it's helper) to its original location when dragging stops with the boolean `revert` option set on the draggable.

Revert
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). Set the values of the `ui-droppable-hover` or `ui-droppable-active` properties on the `classes` option to specify the respective classes.

Drag
On Hover
On Activating Draggable

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

Resize

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

Resize

##### Constrain Resize Area

Define the boundaries of the resizable area. Use the `containment` option to specify a parent DOM element or a jQuery selector, like 'document.'

Resize

##### Preserve Aspect Ratio

Display only an outline of the element while resizing by setting the `helper` option to a CSS class.

Resize

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

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

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

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

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

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

#### Simple Examples

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

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

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

#### Advance Examples

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

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now