jQuery UI Selectable
jQuery UI selectable() method is used to select DOM element individually or in a group. With this method, you can select element by dragging a box with the mouse over the element. You can also use the ctrl button to select more than one element.
Syntax:
You can use the selectable () method in two forms:
First Method
The selectable (options) method specifies that an HTML element contains selectable items. Here the ?options? parameter is an object that specifies the behavior of the elements involved when selecting.
You can use one or more than one options at a time using JavaScript object. In the case of more than one option, you have to separate them using a comma as follows:
Following is a list of different options that can be used with this method:
| Option | Description |
|---|---|
| appendTo | This option specifies which element the selection helper (the lasso) should be appended to. By default its value is body. |
| autoRefresh | If you set this option to true, the position and size of each selectable item is computed at the beginning of a select operation. By default its value is true. |
| cancel | This option forbids selecting if you start selection of elements. By default its value is input, textArea, button, select, option. |
| delay | This option defines when the selecting should start. It sets the time in millisecond. This can be used to prevent unwanted selections. By default its value is 0. |
| disabled | If you set this option to true, it disables the selection mechanism. You cannot select the elements until the mechanism is set to enable. able”) By default its value is false. |
| distance | This option is the distance (in pixels) the mouse must move to consider the selection in progress. This is useful, for example, to prevent simple clicks from being interpreted as a group selection. By default its value is 0. |
| filter | This option is a selector indicating which elements can be part of the selection. By default its value is *. |
| tolerance | This option specifies which mode to use for testing whether the selection helper (the lasso) should select an item. By default its value is touch. |
jQuery UI selectable() example 1
Let’s take a simple example to demonstrate the selectable functionality passing no parameter to the selectable () method.
jQuery UI selectable() example 2
Use of delay and distance:
The following example demonstrates the use of two options delay and distance.
Second Method
The selectable (“action”, params) method is used to perform an action on selectable elements, such as preventing selectable functionality. Here “action” is specified as a string in the first argument (e.g., “disable” to stop the selection).
Following is a list of different actions that can be used with this method:
| Action | Description |
|---|---|
| destroy | This action destroys functionality of an element completely. The elements return to their pre-init state. |
| disable | This action is used to disable the selectable functionality of an element. This method does not accept any arguments. |
| enable | This action enables the selectable functionality of an element. This method does not accept any arguments. |
| option( optionName, value ) | This action gets the value currently associated with the specified optionName. |
| option() | This action gets an object containing key/value pairs representing the current selectable options hash. |
| option( optionName, value ) | This action sets the value of the selectable option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option. |
| option( options ) | This action is sets one or more options for the selectable. The argument options is a map of option-value pairs to be set. |
| refresh | This action causes the size and position of the selectable elements to be refreshed. It is used mostly when the autoRefresh option is disabled (set to false). This method does not accept any arguments. |
| widget | This action returns a jQuery object containing the selectable element. This method does not accept any arguments. |
jQuery UI selectable() example 3
Let’s take an example to demonstrate the use of actions from the above table. In the following example, we demonstrate the use of disable() and option( optionName, value ) methods.
jQuery UI selectable() example 4
The following example specifies how to use event method with selectable functionality. In this example, we demonstrate the event “selected” with selectable functionality.