YouTip- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Api Selectable
## Category
(#)
## Usage
**Description:** Select single elements or a group of elements using the mouse.
**Added in:** 1.0
**Dependencies:**
**Note:** The jQuery UI Selectable plugin allows selecting elements by dragging with the mouse (sometimes called a lasso). You can select multiple (non-contiguous) elements by holding the ctrl/meta key while clicking or dragging.
**Additional Note:** This widget requires some functional CSS to work. If you create a custom theme, use the widget-specific CSS file as a starting point.
### Quick Navigation
| Options | Methods | Events |
| --- | --- | --- |
| (#) (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) (#) |
| Option | Type | Description | Default |
| --- | --- | --- | --- |
| appendTo | Selector | Which element the helper (lasso) should be appended to. **Code example:** Initialize selectable with the `appendTo` option specified: $( ".selector" ).selectable({ appendTo: "#someElem" }); After initialization, get or set the `appendTo` option: // gettervar appendTo = $( ".selector" ).selectable( "option", "appendTo" ); // setter $( ".selector" ).selectable( "option", "appendTo", "#someElem" ); | "body" |
| autoRefresh | Boolean | Determines if the position and size of each selectable item are updated (recalculated) 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 example:** Initialize selectable with the `autoRefresh` option specified: $( ".selector" ).selectable({ autoRefresh: false }); After initialization, get or set the `autoRefresh` option: // gettervar autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" ); // setter $( ".selector" ).selectable( "option", "autoRefresh", false ); | true |
| cancel | Selector | Prevents selecting from starting on the matched elements. **Code example:** Initialize selectable with the `cancel` option specified: $( ".selector" ).selectable({ cancel: "a,.cancel" }); After initialization, get or set the `cancel` option: // gettervar cancel = $( ".selector" ).selectable( "option", "cancel" ); // setter $( ".selector" ).selectable( "option", "cancel", "a,.cancel" ); | "input, textarea, button, select, option" |
| delay | Number | Time in milliseconds after mousedown before selecting starts. This option can prevent unwanted selections when clicking on an element. **Code example:** Initialize selectable with the `delay` option specified: $( ".selector" ).selectable({ delay: 150 }); After initialization, get or set the `delay` option: // gettervar delay = $( ".selector" ).selectable( "option", "delay" ); // setter $( ".selector" ).selectable( "option", "delay", 150 ); | 0 |
| disabled | Boolean | If set to `true`, disables the selectable. **Code example:** Initialize selectable with the `disabled` option specified: $( ".selector" ).selectable({ disabled: true }); After initialization, get or set the `disabled` option: // gettervar disabled = $( ".selector" ).selectable( "option", "disabled" ); // setter $( ".selector" ).selectable( "option", "disabled", true ); | false |
| distance | Number | Distance in pixels that the mouse must be moved before selecting starts. If specified, selecting only starts when the mouse is dragged beyond this distance. This option can prevent unwanted selections when clicking on an element. **Code example:** Initialize selectable with the `distance` option specified: $( ".selector" ).selectable({ distance: 30 }); After initialization, get or set the `distance` option: // gettervar distance = $( ".selector" ).selectable( "option", "distance" ); // setter $( ".selector" ).selectable( "option", "distance", 30 ); | 0 |
| filter | Selector | The matching child elements to make selectable. **Code example:** Initialize selectable with the `filter` option specified: $( ".selector" ).selectable({ filter: "li" }); After initialization, get or set the `filter` option: // gettervar filter = $( ".selector" ).selectable( "option", "filter" ); // setter $( ".selector" ).selectable( "option", "filter", "li" ); | "*" |
| tolerance | String | Specifies the mode for testing if the lasso should select an item. Possible values: * `"fit"`: Lasso overlaps the item entirely. * `"touch"`: Lasso overlaps the item at any ratio. **Code example:** Initialize selectable with the `tolerance` option specified: $( ".selector" ).selectable({ tolerance: "fit" }); After initialization, get or set the `tolerance` option: // gettervar tolerance = $( ".selector" ).selectable( "option", "tolerance" ); // setter $( ".selector" ).selectable( "option", "tolerance", "fit" ); | "touch" |
| Method | Returns | Description |
| --- | --- | --- |
| destroy() | jQuery (plugin only) | Completely removes the selectable functionality. This will return the element back to its pre-init state. * This method does not accept any arguments. **Code example:** Invoke the destroy method: $( ".selector" ).selectable( "destroy" ); |
| disable() | jQuery (plugin only) | Disables the selectable. * This method does not accept any arguments. **Code example:** Invoke the disable method: $( ".selector" ).selectable( "disable" ); |
| enable() | jQuery (plugin only) | Enables the selectable. * This method does not accept any arguments. **Code example:** Invoke the enable method: $( ".selector" ).selectable( "enable" ); |
| option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code example:** Invoke the method: var isDisabled = $( ".selector" ).selectable( "option", "disabled" ); |
| option() | PlainObject | Gets an object containing key/value pairs representing the current selectable options hash. * This method does not accept any arguments. **Code example:** Invoke the method: var options = $( ".selector" ).selectable( "option" ); |
| option( optionName, value ) | jQuery (plugin only) | Sets the value of the selectable option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code example:** Invoke the method: $( ".selector" ).selectable( "option", "disabled", true ); |
| option( options ) | jQuery (plugin only) | Sets one or more options for the selectable. * **options** Type: Object Description: A map of option-value pairs to set. **Code example:** Invoke the method: $( ".selector" ).selectable( "option", { disabled: true } ); |
| refresh() | jQuery (plugin only) | Updates the position and size of each selectable item element. This method can be used to manually recalculate the position and size of each selectable item when the `autoRefresh` option is set to `false`. * This method does not accept any arguments. **Code example:** Invoke the refresh method: $( ".selector" ).selectable( "refresh" ); |
| widget() | jQuery | Returns a `jQuery` object containing the selectable element. * This method does not accept any arguments. **Code example:** Invoke the widget method: var widget = $( ".selector" ).selectable( "widget" ); |
| Event | Type | Description |
| --- | --- | --- |
| create( event, ui ) | selectablecreate | Triggered when the selectable is created. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty but included for consistency with other events. **Code example:** Initialize 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 ) | selectableselected | Triggered at the end of a select operation, when each element is added to the selection. * **event** Type: Event * **ui** Type: Object * **selected** Type: Element Description: The selectable item that was selected. **Code example:** Initialize 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 ) | selectableselecting | Triggered during a select operation, when each element is added to the selection. * **event** Type: Event * **ui** Type: Object * **selecting** Type: Element Description: The current selectable item being selected. **Code example:** Initialize 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 ) | selectablestart | Triggered at the beginning of a select operation. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty but included for consistency with other events. **Code example:** Initialize 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 ) | selectablestop | Triggered at the end of a select operation. * **event** Type: Event * **ui** Type: Object Note: The `ui` object is empty but included for consistency with other events. **Code example:** Initialize 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 ) | selectableunselected | Triggered at the end of a select operation, when each element is removed from the selection. * **event** Type: Event * **ui** Type: Object * **unselected** Type: Element Description: The selectable item that was unselected. **Code example:** Initialize 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 ) | selectableunselecting | Triggered during a select operation, when each element is removed from the selection. * **event** Type: Event * **ui** Type: Object * **unselecting** Type: Element Description: The current selectable item being unselected. **Code example:** Initialize 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 Widget.
Selectable Widget Demo #selectable .ui-selecting { background: #ccc; } #selectable .ui-selected { background: #999; }