Live Demo
Click an item, Ctrl/Cmd-click to add more, or drag a rubber-band box across several items to select them.
Nothing selected yet.
jQuery UI Selectable
jQuery UI's selectable() interaction lets users pick multiple items from a list or grid, either by clicking (with Ctrl/Cmd to multi-select) or by dragging a rubber-band box over them — just like selecting icons on a desktop or files in a file manager.
Quick Reference
| Option / Class / Event | Description | Example |
|---|---|---|
.selectable() | Enables rubber-band / click selection on the children of an element. | $('#list').selectable(); |
filter | Restrict which children are selectable. | filter: 'li' |
.ui-selecting | Auto-applied class while an item is inside the drag box (not yet committed). | .ui-selecting{ background:#fff3d6; } |
.ui-selected | Auto-applied class once an item is confirmed selected. | .ui-selected{ background:#04AA6D; } |
selected | Fires for each item as it becomes selected. | selected: function(e, ui){ ui.selected } |
unselected | Fires for each item as it becomes unselected. | unselected: function(e, ui){ ui.unselected } |
stop | Fires once when the selecting operation ends. | stop: function(e, ui){ ... } |
Tip: jQuery UI adds/removes
ui-selecting and ui-selected classes automatically — you only need to style them in CSS, no manual class toggling required.2) Styling .ui-selecting / .ui-selected
#list .ui-selecting { background: #fff3d6; }
#list .ui-selected { background: #04AA6D; color: #fff; }
3) Selection Events
$('#list').selectable({
selected: function(e, ui){ // ui.selected item just got selected },
unselected: function(e, ui){ // ui.unselected item got deselected },
stop: function(e, ui){ // selection drag finished }
});
4) Practical Example: File-Manager Icon Grid
// works the same on a grid of "icons" as it does on a list
$('#icon-grid').selectable({
filter: '.icon'
});
Note: Combine
selectable() with a "Delete selected" button that reads $('.ui-selected') to act on every currently selected item at once.