Selectable Widget

Categories: Interactions

Selectable Widgetversion added: 1.0

Description: Use the mouse to select elements, individually or in a group.

QuickNavExamples

Options

Methods

Events

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. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections.

Theming

The selectable widget uses the jQuery UI CSS framework to style its look and feel. If selectable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

  • ui-selectable: The selectable element.
    • ui-selectee: One of the selectable elements, as specified through the filter option. This element can also receive one of the following classes: ui-selecting (when the lasso includes this element), ui-selected (after a successful selection), ui-unselecting (when the lasso lost this element).
  • ui-selectable-helper: The "lasso" element used to visualize the ongoing selection.

Dependencies

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

appendTo 

Type: Selector
Default: "body"
Which element the selection helper (the lasso) should be appended to.
Code examples:

Initialize the selectable with the appendTo option specified:

1
2
3
 
$( ".selector" ).selectable({
  appendTo: "#someElem"
});

Get or set the appendTo option, after initialization:

1
2
3
4
5
 
// Getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
 
// Setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );

autoRefresh 

Type: Boolean
Default: true
This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many items, you may want to set this to false and call the refresh() method manually.
Code examples:

Initialize the selectable with the autoRefresh option specified:

1
2
3
 
$( ".selector" ).selectable({
  autoRefresh: false
});

Get or set the autoRefresh option, after initialization:

1
2
3
4
5
 
// Getter
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
 
// Setter
$( ".selector" ).selectable( "option", "autoRefresh", false );

cancel 

Type: Selector
Default: "input,textarea,button,select,option"
Prevents selecting if you start on elements matching the selector.
Code examples:

Initialize the selectable with the cancel option specified:

1
2
3
 
$( ".selector" ).selectable({
  cancel: "a,.cancel"
});

Get or set the cancel option, after initialization:

1
2
3
4
5
 
// Getter
var cancel = $( ".selector" ).selectable( "option", "cancel" );
 
// Setter
$( ".selector" ).selectable( "option", "cancel", "a,.cancel" );

classes 

Type: Object
Default: {}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the selectable with the classes option specified, changing the theming for the ui-selectable class:

1
2
3
4
5
 
$( ".selector" ).selectable({
  classes: {
    "ui-selectable": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-selectable class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).selectable( "option", "classes.ui-selectable" );
 
// Setter
$( ".selector" ).selectable( "option", "classes.ui-selectable", "highlight" );

delay 

Type: Integer
Default: 0
Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element. (version deprecated: 1.12)
Code examples:

Initialize the selectable with the delay option specified:

1
2
3
 
$( ".selector" ).selectable({
  delay: 150
});

Get or set the delay option, after initialization:

1
2
3
4
5
 
// Getter
var delay = $( ".selector" ).selectable( "option", "delay" );
 
// Setter
$( ".selector" ).selectable( "option", "delay", 150 );

disabled 

Type: Boolean
Default: false
Disables the selectable if set to true.
Code examples:

Initialize the selectable with the disabled option specified:

1
2
3
 
$( ".selector" ).selectable({
  disabled: true
});

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
 
// Setter
$( ".selector" ).selectable( "option", "disabled", true );

distance 

Type: Number
Default: 0
Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance. (version deprecated: 1.12)
Code examples:

Initialize the selectable with the distance option specified:

1
2
3
 
$( ".selector" ).selectable({
  distance: 30
});

Get or set the distance option, after initialization:

1
2
3
4
5
 
// Getter
var distance = $( ".selector" ).selectable( "option", "distance" );
 
// Setter
$( ".selector" ).selectable( "option", "distance", 30 );

filter 

Type: Selector
Default: "*"
The matching child elements will be made selectees (able to be selected).
Code examples:

Initialize the selectable with the filter option specified:

1
2
3
 
$( ".selector" ).selectable({
  filter: "li"
});

Get or set the filter option, after initialization:

1
2
3
4
5
 
// Getter
var filter = $( ".selector" ).selectable( "option", "filter" );
 
// Setter
$( ".selector" ).selectable( "option", "filter", "li" );

tolerance 

Type: String
Default: "touch"
Specifies which mode to use for testing whether the lasso should select an item. Possible values:
  • "fit": Lasso overlaps the item entirely.
  • "touch": Lasso overlaps the item by any amount.
Code examples:

Initialize the selectable with the tolerance option specified:

1
2
3
 
$( ".selector" ).selectable({
  tolerance: "fit"
});

Get or set the tolerance option, after initialization:

1
2
3
4
5
 
// Getter
var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
 
// Setter
$( ".selector" ).selectable( "option", "tolerance", "fit" );

Methods

destroy()Returns: jQuery (plugin only)

Removes the selectable functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).selectable( "destroy" );

disable()Returns: jQuery (plugin only)

Disables the selectable.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).selectable( "disable" );

enable()Returns: jQuery (plugin only)

Enables the selectable.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).selectable( "enable" );

instance()Returns: Object

Retrieves the selectable's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the selectable plugin has loaded.

  • This method does not accept any arguments.
Code examples:

Invoke the instance method:

1
 
$( ".selector" ).selectable( "instance" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current selectable options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
var options = $( ".selector" ).selectable( "option" );

option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the selectable option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).selectable( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

Sets one or more options for the selectable.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).selectable( "option", { disabled: true } );

refresh()Returns: jQuery (plugin only)

Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee when the autoRefresh option is set to false.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).selectable( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the selectable element.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
var widget = $( ".selector" ).selectable( "widget" );

Events

create( event, ui )Type: selectablecreate

Triggered when the selectable is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the selectable with the create callback specified:

1
2
3
 
$( ".selector" ).selectable({
  create: function( event, ui ) {}
});

Bind an event listener to the selectablecreate event:

1
 
$( ".selector" ).on( "selectablecreate", function( event, ui ) {} );

selected( event, ui )Type: selectableselected

Triggered at the end of the select operation, on each element added to the selection.
  • event
    Type: Event
  • ui
    Type: Object
    • selected
      Type: Element
      The selectable item that has been selected.
Code examples:

Initialize the selectable with the selected callback specified:

1
2
3
 
$( ".selector" ).selectable({
  selected: function( event, ui ) {}
});

Bind an event listener to the selectableselected event:

1
 
$( ".selector" ).on( "selectableselected", function( event, ui ) {} );

selecting( event, ui )Type: selectableselecting

Triggered during the select operation, on each element added to the selection.
  • event
    Type: Event
  • ui
    Type: Object
    • selecting
      Type: Element
      The current selectable item being selected.
Code examples:

Initialize the selectable with the selecting callback specified:

1
2
3
 
$( ".selector" ).selectable({
  selecting: function( event, ui ) {}
});

Bind an event listener to the selectableselecting event:

1
 
$( ".selector" ).on( "selectableselecting", function( event, ui ) {} );

start( event, ui )Type: selectablestart

Triggered at the beginning of the select operation.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the selectable with the start callback specified:

1
2
3
 
$( ".selector" ).selectable({
  start: function( event, ui ) {}
});

Bind an event listener to the selectablestart event:

1
 
$( ".selector" ).on( "selectablestart", function( event, ui ) {} );

stop( event, ui )Type: selectablestop

Triggered at the end of the select operation.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the selectable with the stop callback specified:

1
2
3
 
$( ".selector" ).selectable({
  stop: function( event, ui ) {}
});

Bind an event listener to the selectablestop event:

1
 
$( ".selector" ).on( "selectablestop", function( event, ui ) {} );

unselected( event, ui )Type: selectableunselected

Triggered at the end of the select operation, on each element removed from the selection.
  • event
    Type: Event
  • ui
    Type: Object
    • unselected
      Type: Element
      The selectable item that has been unselected.
Code examples:

Initialize the selectable with the unselected callback specified:

1
2
3
 
$( ".selector" ).selectable({
  unselected: function( event, ui ) {}
});

Bind an event listener to the selectableunselected event:

1
 
$( ".selector" ).on( "selectableunselected", function( event, ui ) {} );

unselecting( event, ui )Type: selectableunselecting

Triggered during the select operation, on each element removed from the selection.
  • event
    Type: Event
  • ui
    Type: Object
    • unselecting
      Type: Element
      The current selectable item being unselected.
Code examples:

Initialize the selectable with the unselecting callback specified:

1
2
3
 
$( ".selector" ).selectable({
  unselecting: function( event, ui ) {}
});

Bind an event listener to the selectableunselecting event:

1
 
$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} );

Example:

A simple jQuery UI Selectable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selectable demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <style>
  #selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>
$( "#selectable" ).selectable();
</script>
 
</body>
</html>

Demo: