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.