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">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Selectable Example</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #selectable{
            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;}
    </style>
</head>
<body">
    <h2>JQuery UI Selectable Example - rathorji.in</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>
    </ol>

    <script>
        $( function() {
            $("#selectable").selectable();
        });
    </script>
</body>
</html>

May this example help you.