Search within TutorialsPark

jQuery UI : Selectable Interaction


Learn how to use jQuery UI Selectable Interaction to Select one or multiple Element.


jQuery UI Selectable Interaction : Applying Selectable Interaction

The jQuery UI Selectable Interaction provides enables the used to select one or multiple element, simply by dragging the mouse over them, or clicking on individual items.To apply this Interaction use method selectable.

In the demo, we use the selectable interaction on the element which contains a list of elements from which the user can select.To create visual effect of selection we use CSS classes.

Example: jQuery UI Selectable Interaction - Applying Selectable Interaction

Give it a TRY! » Note:The class ui.selected is applied when the selection is in progress, and ui.selected when selected.


jQuery UI Selectable Interaction : Enable Multiple Selection

The jQuery UI Selectable Interaction can be used to select elements by simply clicking on them.Multiple Elements can be selected, and for non-contiguous selection use Control/Meta Keys

Example: jQuery UI Selectable Interaction - Enable Multiple Selection

Give it a TRY! » Note:The class ui.selected is applied when the selection is in progress, and ui.selected when selected.


jQuery UI Selectable Interaction : Configuration of Selectable Interaction

The jQuery UI Selectable Interaction provides a set of setting options to Configure the Selectables.

Table: jQuery UI Selectable Interactions Configurations

Settings Description
disabled When set to true, the interaction is initially disabled. Default value is false
autoRefresh When set to true, the size and position of the every selectable is refreshed at the start of each select operation. Default value is true
cancel To prevent the specified elements from being selected using a click.
delay To specify the delay in milliseconds before the element gets selected
distance To set the distance the mouse pointer must move, with button pressed, before selection begins.
filter A Selector to filter child element.

jQuery UI Selectable Interaction : Cancel Setting

The jQuery UI Selectable Interaction setting of cancel can be used to make element unselectable by the user.

In the demo, a selector is used to prevent the element with id value of india from being selected, but it can be selected by using a click.

Example: jQuery UI Selectable Interaction - cancel Setting

Give it a TRY! » Note:Cancel Setting is not applicable when the element is selected by dragging.


jQuery UI Selectable Interaction : Filtering Selectables

While triggering jQuery UI Selectable Interaction can be used to restrict element within the selectable container that we do not want to be selectable, for that purpose the setting available is filter

In the demo, elements belonging to class europe are selected only.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: The elements which do match the filter class are ignored and does not become part of the selection.