QuickNavOverviewExamples

Options

autoRefresh
cancel
delay
disabled
distance
filter
tolerance

Methods

destroy
disable
enable
refresh
option
widget

Events

create
selected
selecting
start
stop
unselected
unselecting

Selectable Widgetversion added: 1.0

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

Options

autoRefreshType: 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.

cancelType: Selector

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

delayType: Integer

Default: 0
Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.

disabledType: Boolean

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

Initialize the selectable with the disabled option specified:

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

Get or set the disabled option, after initialization:

// getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
 
// setter
$( ".selector" ).selectable( "option", "disabled", true );

distanceType: 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.

filterType: Selector

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

toleranceType: 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.

Methods

destroy()

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

disable()

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

enable()

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

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.

option() Returns: PlainObject

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

option( optionName, value )

Sets the value of the selectable option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.

option( options )

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

refresh()

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.

widget() Returns: jQuery

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

Events

create( event, ui )

Triggered when the selectable is created.

selected( event, ui )

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.

selecting( event, ui )

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.

start( event, ui )

Triggered at the beginning of the select operation.

stop( event, ui )

Triggered at the end of the select operation.

unselected( event, ui )

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.

unselecting( event, ui )

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.

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.

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.

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="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <style>
    #selectable .ui-selecting {
        background: #ccc;
    }
    #selectable .ui-selected {
        background: #999;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/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: