Visual DOM Selection Plugin With jQuery - easySelectable

easySelectable is a jQuery plugin for Visual Multi-DOM Selections that allow the user to select/highlight multiple elements with mouse drag. Similar to the jQuery UI's Selectable widget.

How to use it:

1. Create a group of elements to be selectable.

<ul id="easySelectable">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  ...
</ul>

2. Include the latest version of jQuery library and the jQuery easySelectable plugin on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="src/js/easySelectable.js"></script>

3. Prevent the user from select text within the DOM elements.

.easySelectable {
  -webkit-user-select:none; 
  -moz-user-select:none; 
  -ms-user-select: none;
}

4. Enable the selectable functionality on the list.

$(function(){
  $('#easySelectable').easySelectable();
})

5. Specify the CSS selector of DOM elements which should be selectable.

$(function(){
  $('#easySelectable').easySelectable({
    'item': 'li'
  });
})

6. Change the current selectable/unselectable state.

$(function(){
  $('#easySelectable').easySelectable({
    'state': true,
  });
})

7. Callback functions.

$(function(){
  $('#easySelectable').easySelectable({
    onSelecting: function(el){
      // do something
    },
    onSelected: function(el){
      // do something
    },
    onUnSelected: function(el){
      // do something
    }
  });
})

---

This awesome jQuery plugin is developed by mee4dy. For more Advanced Usages, please check the demo page or visit the official website.