Juqery UI Elements
Jquery UI Select boxes
Drag & Drop UI
Draggables
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. Use the cursorAtoption to specify another location relative to the draggable (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 a parent DOM element or a jQuery selector, like 'document.'
Return the draggable (or it's helper) to its original location when dragging stops with the boolean revertoption.
Droppables
Enable any DOM element to be droppable, a target for draggable elements.
Specify using the acceptoption which element (or group of elements) is accepted by the target droppable.
Modal Dialogs
| Basic modal example | |
| Overlay modal example | |
| Animated modal example | |
| Buttons modal example | |
| Disable drag modal example | |
| Form modal example |
Accordions
Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.
Show panels on hover