jQuery UI’s selectable() method (Widget)

Date Published: 03/05/2020 Published By: JaiSchool

The selectable() widget allows us to make an element or a group of element selectable. Now, these elements can be selected by hovering mouse on it and then dragging. Or you can also select these via click event. Use the CTRL key to select the multiple elements.

Options/Properties of selectable method

S.N.PropertyValueExample
1.appendToSelect Element by Id or Class or TagView
2.cancelSelect Element by Id or Class or TagView
3.disabledtrue and falseView
4.classesSet Class Name and then apply CSS
properties by selecting it in CSS.		View
5.tolerancefit and touchView
6.distanceValue in pixels.
For example - distance:20		View
7.delayTime in milliseconds.
For example - delay:500		View
8.filterSelect Element by Id or Class or Tag.
For example - filter:".jai"		View
9.autoRefreshtrue and falseView

cancel Option

The cancel option can have class or id value of the element, you do not want to start selecting (also unselecting) with. The cancel option prevent element selecting only if you started selecting from that element defined in as cancel value.

For example, in the below example if you start selection from <li class="jai">Jaischool</li> Then you can't.

But when you do selection from any other element then you will also be able to select <li class="jai">Jaischool</li> this element. This applies when you perform the selection by hovering and dragging from other elements.

If you use mouse click event to select then canceled element will no longer be selectable.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's cancel option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:1px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      cancel:".jai"
    });
  });

</script>
</body>
</html>

disabled Option

Values of disabled option are - true and false (default value). This option disables the selectable() method if it is set to true.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's disabled option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:1px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      unselected:function(event,ui){
        $( ".email-list" ).selectable( "option", "disabled", true );
      }
    });
  });

</script>
</body>
</html>

classes Option

You can set a class to the selectable element. A selectable element has a class value .ui-selectee. You can define any custom class name using this in classes option. The type of classes option is object.

See example. I have set a class value highlight and then I selected it in CSS and passed border in the left and right side.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's classes option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

      .highlight{
        border-left:5px solid green !important;
        border-right:5px solid green !important;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      classes:{"ui-selectee":"highlight"}
    });
  });

</script>
</body>
</html>

tolerance Option

Values of tolerance option are fit and touch. Touch is the default value.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's tolerance option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }
    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      tolerance:"fit"
    });
  });

</script>
</body>
</html>

distance Option

The type of distance is number (default is set to 0). The elements will start selecting after dragging cursor on select-able element up to pixels defined in the distance option. I think selection by click event will not work in this case.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's distance option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      distance:20,
    });
  });

</script>
</body>
</html>

delay Option

It has time in millisecons (integer value). Selection will start after time defined in delay.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's delay option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      delay:500,
    });
  });

</script>
</body>
</html>

filter Option

By default you can select all the select-able (*) elements (all have class value .ui-selectee). But you can specified that what elements you want to be select-able. 

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's filter option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li class="d">[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      filter:".jai,.d"
    });
  });

</script>
</body>
</html>

autoRefresh Option

Have boolean values - true and false.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's autoRefresh option of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:3px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li class="jai">Jaischool.com</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result" id="result"></h2>

  <div id="main"></div>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      autoRefresh:true
    });
  });

</script>
</body>
</html>

Important Classes For Selectable Method

  1. ui-selecting (applied when an element is selecting)
  2. ui-selected (when an element has been selected)

Events For Selectable() Method

  • selected:function(event,ui){//statements}
  • unselected:function(event,ui){//statements}
  • stop:function(event,ui){//statements}

selected Event

Use this event when you want to perform any action just after selecting the elements. You can use class value .ui-selected to count the length of the selected elements.

<!DOCTYPE html>
<html>
<head>
  <title>Selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:1px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result"></h2>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      selected:function(event,ui){
        var length=$(".ui-selected").length;
        $(".result").html(length+" Items Selected.");
      }
    });
  });

</script>
</body>
</html>

unselected Event

The unselected event of the selectable() method (in Jquery UI called widget) executes when you unselect a selected item.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's unselected event of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:1px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result"></h2>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      unselected:function(event,ui){
        window.alert("You unselected some items");
      }
    });
  });

</script>
</body>
</html>

stop Event

Triggers just after the end of selection.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's stop event of selectable() method</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

    <style>
      *{box-sizing:border-box;}
      .email-list{
        margin:50px;
      }
      .email-list li{
        list-style:none;
        border:1px solid #ccc;
        width:300px;
        padding:16px;
        font-size:25px;
        text-align:center;
        margin:1px;
      }
      .ui-selecting{
        background:red;
      }
      .ui-selected{
        background:green;
      }

    </style>
</head>
<body>
  <h1 align="center">Selectable Method</h1>

  <ul class="email-list">
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
    <li>[email protected]</li>
  </ul>

  <h2 class="result"></h2>

<script>
  $(document).ready(function(){
    $(".email-list").selectable({
      stop:function(event,ui){
        var length=$(".ui-selected").length;
        $(".result").html(length+" Items Selected.");
      }
    });
  });

</script>
</body>
</html>

Publish A Comment

Leave a Reply

Your email address will not be published. Required fields are marked *