JqueryUI - Selectable

jQueryUI provides selectable() method to select DOM element individually or in a group. With this method elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by clicking or dragging while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.
The selectable() method can be used in two forms −
$(selector, context).selectable (options) Method
$(selector, context).selectable (options) Method
$(selector, context).selectable ("action", params) Method
$(selector, context).selectable ("action", params) Method
The selectable (options) method declares that an HTML element contains selectable items. The options parameter is an object that specifies the behavior of the elements involved when selecting.
$(selector, context).selectable (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided, then you will separate them using a comma as follows −
$(selector, context).selectable({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
This option is tells which element the selection helper (the lasso) should be appended to. By default its value is body.
Option - appendTo
This option is tells which element the selection helper (the lasso) should be appended to. By default its value is body.
Syntax
$( ".selector" ).selectable({ appendTo: "#identifier" });

This option if set 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.
Option - autoRefresh
This option if set 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. If you have many items, you may want to set this to false and call the refresh() method manually.
Syntax
$( ".selector" ).selectable({ autoRefresh: false });

This option forbids selecting if you start selection of elements. By default its value is input,textarea,button,select,option.
Option - cancel
This option forbids selecting if you start selection of elements. By default its value is input,textarea,button,select,option.
Syntax
$( ".selector" ).selectable({ cancel: "a,.cancel" });

This option is used to set time in milliseconds and defines when the selecting should start. This can be used to prevent unwanted selections. By default its value is 0.
Option - delay
This option is used to set time in milliseconds and defines when the selecting should start. This can be used to prevent unwanted selections. By default its value is 0.
Syntax
$( ".selector" ).selectable({ delay: 150 });

This option when set to true, disables the selection mechanism. Users cannot select the elements until the mechanism is restored using the selectable ("enable") instruction. By default its value is false.
Option - disabled
This option when set to true, disables the selection mechanism. Users cannot select the elements until the mechanism is restored using the selectable ("enable") instruction. By default its value is false.
Syntax
$( ".selector" ).selectable({ disabled: true });

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.
Option - 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.
Syntax
$( ".selector" ).selectable({ distance: 30 });

This option is a selector indicating which elements can be part of the selection. By default its value is *.
Option - filter
This option is a selector indicating which elements can be part of the selection. By default its value is *.
Syntax
$( ".selector" ).selectable({ filter: "li" });

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.
Option - 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.
This can be of type −
fit − This type indicates a drag selection must completely encompass an element for it to be selected.
fit − This type indicates a drag selection must completely encompass an element for it to be selected.
touch − This type indicates the drag rectangle only needs to intersect any portion of the selectable item.
touch − This type indicates the drag rectangle only needs to intersect any portion of the selectable item.
Syntax
$( ".selector" ).selectable({ tolerance: "fit" });

The following section will show you a few working examples of selectable functionality.
The following example demonstrates a simple example of selectable functionality, passing no parameters to the selectable() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; 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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>
Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7
Try to click on products, use CTRLS key to select multiple products.
The following example demonstrates the usage of two options delay and distance in the selectable function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>
Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Product 1
Product 2
Product 3

Product 1
Product 2
Product 3

Product 4
Product 5
Product 6
Product 7

Product 4
Product 5
Product 6
Product 7
Try to click on products, use CTRL key to select multiple products. You will notice that selection of the Product 1, Product 2 and Product 3 start after a delay of 1000ms.  Selection of the Product 4, Product 5, Product 6 and Product 7 can't be done individually. The selection starts only after the mouse moves a distance of 100px.
The following example demonstrates the usage of two options delay and distance in the selectable function of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 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-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>
Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7
Try to click on products. You will notice that only first product can be selected.
The selectable ("action", params) method can perform an action on selectable elements, such as preventing selectable functionality. The action is specified as a string in the first argument (e.g., "disable" to stop the selection). Check out the actions that can be passed, in the following table.
$(selector, context).selectable ("action", params);;

The following table lists the different actions that can be used with this method −
This action removes the selectable functionality of an element completely. The elements return to their pre-init state.
Action - destroy
This action removes the selectable functionality of an element completely. The elements return to their pre-init state.
Syntax
$( ".selector" ).selectable("destroy");

This action deactivates the selectable functionality of an element. This method does not accept any arguments.
Action - disable
This action removes the selectable functionality of an element completely. The elements return to their pre-init state.
Syntax
$( ".selector" ).selectable("disable");

This action enables the selectable functionality of an element. This method does not accept any arguments.
Action - enable
This action enables the selectable functionality of an element. This method does not accept any arguments.
Syntax
$( ".selector" ).selectable("enable");

This action gets the value currently associated with the specified optionName.
Action - option( optionName )
This action gets the value currently associated with the specified optionName.
Syntax
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );

This action gets an object containing key/value pairs representing the current selectable options hash.
Action - option()
This action gets an object containing key/value pairs representing the current selectable options hash.
Syntax
var options = $( ".selector" ).selectable( "option" );

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.
Action - 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.
Syntax
$( ".selector" ).selectable( "option", "disabled", true );

This action is sets one or more options for the selectable. The argument options is a map of option-value pairs to be set.
Action - 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.
Syntax
$( ".selector" ).selectable( "option", { disabled: true } );
This action causes the size and position of the selectable elements to be refreshed. Used mostly when the autoRefresh option is disabled (set to false). This method does not accept any arguments.
Action - refresh
This action causes the size and position of the selectable elements to be refreshed. Used mostly when the autoRefresh option is disabled. This method does not accept any arguments.
Syntax
$( ".selector" ).selectable("refresh");

This action returns a jQuery object containing the selectable element. This method does not accept any arguments.
Action - widget
This action returns a jQuery object containing the selectable element. This method does not accept any arguments.
Syntax
var widget = $( ".selector" ).selectable( "widget" );

Now let us see an example using the actions from the above table. The following example demonstrates 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 = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #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: #cedc98;
            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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>
Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Product 1
Product 2
Product 3

Product 1
Product 2
Product 3

Product 4
Product 5
Product 6
Product 7

Product 4
Product 5
Product 6
Product 7
Try to click on products, use CTRL key to select multiple products. You will notice that Product 1, Product 2, and Product 3 are disabled. Selection of Product 4, Product 5, Product 6 and Product 7 happens after the mouse moves distance of 1px.
In addition to the selectable (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
This event is triggered when the selectable element is created. Where event is of type Event, and ui is of type Object.
Event - create(event, ui)
This event is triggered when the selectable element is created. Where event is of type Event, and ui is of type Object.
Syntax
$( ".selector" ).selectable({
   create: function( event, ui ) {}
});

This event is triggered for each element that becomes selected. Where event is of type Event, and ui is of type Object.
Event - selected(event, ui)
This event is triggered for each element that becomes selected. Where event is of type Event, and ui is of type Object. Possible values of ui are −
selected − This specifies the selectable item that has been selected..
selected − This specifies the selectable item that has been selected..
Syntax
$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});

This event is triggered for each selectable element that’s about to get selected. Where event is of type Event, and ui is of type Object.
Event - selecting(event, ui)
This event is triggered for each selectable element that’s about to get selected. Where event is of type Event, and ui is of type Object. Possible values of ui are −
selecting − This specifies a reference to the element that’s about to become selected.
selecting − This specifies a reference to the element that’s about to become selected.
Syntax
$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});

This event is triggered at the beginning of the select operation.  Where event is of type Event, and ui is of type Object.
Event - start(event, ui)
This event is triggered at the beginning of the select operation.  Where event is of type Event, and ui is of type Object.
Syntax
$( ".selector" ).selectable({
   start: function( event, ui ) {}
});

This event is triggered at the end of the select operation.  Where event is of type Event, and ui is of type Object.
Event - stop(event, ui)
This event is triggered at the end of the select operation.  Where event is of type Event, and ui is of type Object.
Syntax
$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});

This event is triggered at the end of the select operation for each element that becomes unselected. Where event is of type Event, and ui is of type Object.
Event - unselected(event, ui)
This event is triggered at the end of the select operation for each element that becomes unselected. Where event is of type Event, and ui is of type Object. Possible values of ui are −
unselected − An element that contains a reference to the element that has become unselected.
unselected − An element that contains a reference to the element that has become unselected.
Syntax
$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});

This event is triggered during select operation for each selected element that’s about to become unselected. Where event is of type Event, and ui is of type Object.
Event - unselecting(event, ui)
This event is triggered during select operation for each selected element that’s about to become unselected. Where event is of type Event, and ui is of type Object. Possible values of ui are −
unselecting − An element that contains a reference to the element that’s about to become unselected.
unselecting − An element that contains a reference to the element that’s about to become unselected.
Syntax
$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

The following example demonstrates the event method usage during selectable functionality. This example demonstrates the use of event selected.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; 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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            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">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>
Let us save the above code in an HTML file selectableexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7

Product 1
Product 2
Product 3
Product 4
Product 5
Product 6
Product 7
Try to click on products, use CTRL key to select multiple products. You will notice that the product number selected is printed at the bottom.
 Print
 Add Notes
 Bookmark this page