## Selectable Widget version added: 1.0

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

## QuickNavExamples

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.

## Options

### appendToType: Selector

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

Initialize the selectable with the appendTo option specified:

`$(` `".selector"` `).selectable({ appendTo:` `"#someElem"` `});`

Get or set the appendTo option, after initialization:

`// getter` `var` `appendTo = $(` `".selector"` `).selectable(` `"option"``,` `"appendTo"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"appendTo"``,` `"#someElem"` `);`

### 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.
Code examples:

Initialize the selectable with the autoRefresh option specified:

`$(` `".selector"` `).selectable({ autoRefresh:` `false` `});`

Get or set the autoRefresh option, after initialization:

`// getter` `var` `autoRefresh = $(` `".selector"` `).selectable(` `"option"``,` `"autoRefresh"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"autoRefresh"``,` `false` `);`

### cancelType: 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:

`$(` `".selector"` `).selectable({ cancel: a,.cancel });`

Get or set the cancel option, after initialization:

`// getter` `var` `cancel = $(` `".selector"` `).selectable(` `"option"``,` `"cancel"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"cancel"``, a,.cancel );`

### delayType: Integer

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

Initialize the selectable with the delay option specified:

`$(` `".selector"` `).selectable({ delay: 150 });`

Get or set the delay option, after initialization:

`// getter` `var` `delay = $(` `".selector"` `).selectable(` `"option"``,` `"delay"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"delay"``, 150 );`

### 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.
Code examples:

Initialize the selectable with the distance option specified:

`$(` `".selector"` `).selectable({ distance: 30 });`

Get or set the distance option, after initialization:

`// getter` `var` `distance = $(` `".selector"` `).selectable(` `"option"``,` `"distance"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"distance"``, 30 );`

### filterType: Selector

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

Initialize the selectable with the filter option specified:

`$(` `".selector"` `).selectable({ filter: li });`

Get or set the filter option, after initialization:

`// getter` `var` `filter = $(` `".selector"` `).selectable(` `"option"``,` `"filter"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"filter"``, li );`

### 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.

Code examples:

Initialize the selectable with the tolerance option specified:

`$(` `".selector"` `).selectable({ tolerance:` `"fit"` `});`

Get or set the tolerance option, after initialization:

`// getter` `var` `tolerance = $(` `".selector"` `).selectable(` `"option"``,` `"tolerance"` `);` `// setter` `$(` `".selector"` `).selectable(` `"option"``,` `"tolerance"``,` `"fit"` `);`

## 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.

Code examples:

Invoke the destroy method:

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

### disable()

Disables the selectable.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

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

### enable()

Enables the selectable.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

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

### option( optionName )Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

Code examples:

Invoke the method:

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

### option()Returns: PlainObject

Gets an object containing key/value pairs representing the current selectable options hash.

- This method does not accept any arguments.

Code examples:

Invoke the method:

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

### 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.

Code examples:

Invoke the method:

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

### option( options )

Sets one or more options for the selectable.

- options
  Type: Object
  A map of option-value pairs to set.

Code examples:

Invoke the method:

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

### 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.

Code examples:

Invoke the refresh method:

`$(` `".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:

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

## Events

### create( event, ui )Type: `selectablecreate`

Triggered when the selectable is created.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the selectable with the create callback specified:

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

Bind an event listener to the selectablecreate event:

`$(` `".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:

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

Bind an event listener to the selectableselected event:

`$(` `".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:

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

Bind an event listener to the selectableselecting event:

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

### start( event, ui )Type: `selectablestart`

Triggered at the beginning of the select operation.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the selectable with the start callback specified:

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

Bind an event listener to the selectablestart event:

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

### stop( event, ui )Type: `selectablestop`

Triggered at the end of the select operation.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the selectable with the stop callback specified:

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

Bind an event listener to the selectablestop event:

`$(` `".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:

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

Bind an event listener to the selectableunselected event:

`$(` `".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:

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

Bind an event listener to the selectableunselecting event:

`$(` `".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``=``"http://code.jquery.com/ui/1.9.2/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.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/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: