This time I will share jQuery Plugin and tutorial about jQuery Plugin To Select Multiple Elements with Mouse – nuSelectable, hope it will help you in programming stack.
nuSelectable is a jQuery plugin which enables the visitor to select multiple DOM elements using mouse drag. The goal is to draw a box with your cursor to select a DOM element (or group of elements). Similar to the Google Drive file select.
How to use it:
1. Place the jQuery nuSelectable plugin after jQuery library but before the closing body tag.
1 |
< script src = "//code.jquery.com/jquery-1.11.3.min.js" ></ script > |
2 |
< script src = "src/jquery.nu-selectable.js" ></ script > |
2. Create a group of DOM elements to be selectable.
1 |
< div id = "item-container" > |
2 |
< div class = "item" >Item 1</ div > |
3 |
< div class = "item" >Item 2</ div > |
4 |
< div class = "item" >Item 3</ div > |
3. Enable the plugin by calling the function on the top container.
1 |
$( '#item-container' ).nuSelectable({ |
3 |
selectionClass: 'nu-selection-box' , |
4 |
selectedClass: 'nu-selected' , |
4. Style the selection box and selected elements in the CSS.
5. Callbacks.
1 |
onSelect: function () {}, |
2 |
onUnSelect: function () {}, |
Change log:
2016-02-14
This awesome jQuery plugin is developed by avxto. For more Advanced Usages, please check the demo page or visit the official website.