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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI selectable-1</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-1 .ui-selecting { background: #cdc8b1 ; }
         #selectable-1 .ui-selected { background: #006400; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #00ced1;
            border: 1px solid #DDDDDD;
            color: #8b0a50;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   <body>
      <ol id="selectable-1">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol> 
   </body>
</html>

Test it Now

jQuery UI selectable() example 2

Use of delay and distance:

The following example demonstrates the use of two options delay and distance.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id="selectable-2">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol  id="selectable-3">
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
   </body>
</html>

Test it Now

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #00bfff; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background:#b4eeb4;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id="selectable-5">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol  id="selectable-6">
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
   </body>
</html>

Test it Now

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.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI selectable-7</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #006400; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #00ffff;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: red;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <h3>Events</h3>
      <ol id="selectable-7">
         <li class="ui-widget-content">Item 1</li>
         <li class="ui-widget-content">Item 2</li>
         <li class="ui-widget-content">Item 3</li>
         <li class="ui-widget-content">Item 4</li>
         <li class="ui-widget-content">Item 5</li>
         <li class="ui-widget-content">Item 6</li>
         <li class="ui-widget-content">Item 7</li>
      </ol>
      <span class="resultarea">Selected Items</span>>
      <span id=result class="resultarea"></span>
   </body>
</html>

Test it Now

Next TopicjQuery UI Sortable

← prev next →