In this tutorial, you will learn JQuery UI Selectable Example

In this section, you will know jquery UI selectable. jquery UI provides a selectable() method to select DOM elements individually or in a group. these method elements can be selected by dragging a box (sometimes called a lasso) with the mouse over the elements.

Example :

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectable Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
            margin:40px auto !important;
        #feedback {font-size: 1.4em;}
        #selectable .ui-selecting {background: #008B8B;}
        #selectable .ui-selected {background: #008B8B; color: white;}
        #selectable {list-style-type: none; margin: 0; padding: 0; width: 15%;text-align: center;}
        #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
    <h2>JQuery UI Selectable Example -</h2>
    <ol id="selectable">
        <li class="ui-widget-content">Tab 1</li>
        <li class="ui-widget-content">Tab 2</li>
        <li class="ui-widget-content">Tab 3</li>

        $( function() {

May this example help you.