The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.
$("#selectable").selectable();
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#selectable .ui-selecting {
background: silver;
}
#selectable .ui-selected {
background: gray;
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
});
</script>
</head>
<body style="font-size:62.5%;">
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
This event is triggered at the end of the select operation, on each element added to the selection.
selected event as an init option.
$( ".selector" ).selectable({
selected: function(event, ui) { ... }
});selected event by type: selectableselected.
$( ".selector" ).bind( "selectableselected", function(event, ui) {
...
});This event is triggered during the select operation, on each element added to the selection.
selecting event as an init option.
$( ".selector" ).selectable({
selecting: function(event, ui) { ... }
});selecting event by type: selectableselecting.
$( ".selector" ).bind( "selectableselecting", function(event, ui) {
...
});This event is triggered at the beginning of the select operation.
start event as an init option.
$( ".selector" ).selectable({
start: function(event, ui) { ... }
});start event by type: selectablestart.
$( ".selector" ).bind( "selectablestart", function(event, ui) {
...
});This event is triggered at the end of the select operation.
stop event as an init option.
$( ".selector" ).selectable({
stop: function(event, ui) { ... }
});stop event by type: selectablestop.
$( ".selector" ).bind( "selectablestop", function(event, ui) {
...
});This event is triggered at the end of the select operation, on each element removed from the selection.
unselected event as an init option.
$( ".selector" ).selectable({
unselected: function(event, ui) { ... }
});unselected event by type: selectableunselected.
$( ".selector" ).bind( "selectableunselected", function(event, ui) {
...
});This event is triggered during the select operation, on each element removed from the selection.
unselecting event as an init option.
$( ".selector" ).selectable({
unselecting: function(event, ui) { ... }
});unselecting event by type: selectableunselecting.
$( ".selector" ).bind( "selectableunselecting", function(event, ui) {
...
});Remove the selectable functionality completely. This will return the element back to its pre-init state.
Disable the selectable.
Enable the selectable.
Get or set any selectable option. If no value is specified, will act as a getter.
Set multiple selectable options at once by providing an options object.
Returns the .ui-selectable element.
Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.
The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is
<ul>
<li></li>
<li></li>
<li></li>
</ul>.