Interactions
4 methodsInteraction plugins that add drag-and-drop and reordering behaviors to elements.
$(el).draggable(options?)Makes the selected elements draggable by mouse. Supports options like handle, axis, containment, and grid.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { handle, axis, containment, grid, revert, ... }. |
Returns
jQuery
Example
$('.box').draggable({
handle: '.drag-handle',
containment: 'parent',
grid: [10, 10],
});$(el).droppable(options?)Makes elements accept draggable drops; fires activate/over/out/drop/deactivate callbacks.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { accept, hoverClass, drop(event, ui), ... }. |
Returns
jQuery
Example
$('.trash').droppable({
accept: '.item',
drop: function (event, ui) {
ui.draggable.remove();
},
});$(el).sortable(options?)Makes a list of children sortable by drag. Supports placeholder, connectWith, and update callback.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { items, placeholder, connectWith, update, ... }. |
Returns
jQuery
Example
$('ul.todos').sortable({
placeholder: 'placeholder',
update: function () {
console.log('order changed');
},
});instance('option', key, value)Gets or sets an option on an existing interaction instance after initialization.
Parameters
| Name | Type | Description |
|---|---|---|
| key | string | Option name. |
| value | any | New value (omit to get). |
Returns
any | jQuery
Example
$('.box').draggable('option', 'axis', 'x');Widgets
4 methodsUI widgets built on the jQuery UI widget factory: accordion, datepicker, dialog, and tabs.
$(el).accordion(options?)Turns nested headings + content panels into a collapsible accordion.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { active, collapsible, heightStyle, ... }. |
Returns
jQuery
Example
$('#acc').accordion({
collapsible: true,
heightStyle: 'content',
});$(el).datepicker(options?)Attaches a popup datepicker to text inputs. Supports dateFormat, minDate, maxDate, onSelect.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { dateFormat, minDate, maxDate, onSelect, ... }. |
Returns
jQuery
Example
$('#dob').datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
});$(el).dialog(options?)Opens the selected element as a floating, draggable, resizable modal dialog.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { modal, buttons, width, height, autoOpen, ... }. |
Returns
jQuery
Example
$('#dlg').dialog({
modal: true,
buttons: { OK: function () { $(this).dialog('close'); } },
});$(el).tabs(options?)Converts a list of links + content panels into a tabbed interface.
Parameters
| Name | Type | Description |
|---|---|---|
| options | object | Optional { active, collapsible, event, ... }. |
Returns
jQuery
Example
$('#tabs').tabs({
active: 1,
event: 'mouseover',
});