Search within TutorialsPark

jQuery UI : Selectable Methods


Learn how to use jQuery UI Selectable Methods to Control and Manipulate Selectable Interactions


jQuery UI Selectable Interaction : Methods

The jQuery UI Selectable Interaction provides a set of methods to control and manipulate selectable Interactions, most of these method are similar to other interaction methods, only unique one being refresh method.

Table: jQuery UI Selectable Interactions Methods

Methods Description
selectable("destroy") To Remove interaction from the element.
selectable("disable") To Disable the selectable Interaction.
selectable("enable") To enable the selectable Interaction
selectable("option") To alter one or multiple Interactions settings
unselecting To Refresh the selectable Interaction. It is an alternative to setting a value of false for autoRefresh setting.

jQuery UI Selectable Interaction : Refresh Methods

The jQuery UI Setting of refresh method is used to manually refresh the position and size of all selectables. It should be used when the setting autoRefresh is set to false.

In the demo, we use click handler and attach it to button element, which simply calls the method refresh manually on the elements of the selectable container.

Example: jQuery UI Selectable Interaction - Refresh Method

Give it a TRY! » Note:If we click the refresh button, the selection status is update.


jQuery UI Selectable Interaction : Create Selectable Image Viewer.

The jQuery UI Selectable Interaction methods can be used to create a basic kind of Image Viewer, where the user can choose to view the image by selecting the related thumbnail of the image.

In the demo, we used a div element with

Example: jQuery UI Selectable Interaction - Selecting and UnSelecting Events

Give it a TRY! » Note:All procedures are same as last event, just the trigger event is different.


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 earth from being selected, but it can be selected by using a click.

Example: jQuery UI Selectable Interaction - cancel Setting

Give it a TRY! » Note: Selecting Elements by Clicking on them cannot be cancelled using this setting.


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, we have assigned class to each item except for the second, the element without the class name selectable is filter out.

Example: jQuery UI Sortable Interaction Compatibility of Multiple Widget

Give it a TRY! » Note: The element without the class gets ignored and does not become part of the selection.