Selection simulates the behavior of a Windows file/directory, that is, click and/or drag to select items, hold down CTRL to select multiple items, or hold down SHIFT to select successive groups of objects.
An efficient, dependency-free, mobile-friendly, and fully configurable plugin that allows you to select multiple items using mouse drag and touch drag.
Creates A Small Dropdown List of Selectable Emojis | EmojiButtonList.js
How to make use of it:
Install it with package managers.
# NPM $ npm install selectable --save # Bower $ bower install selectable --save
Import the ‘Selectable’ into your project or include the JavaScript file immediately:
<script src='selectable.min.js'></script>
Add the CSS class ‘UI-selectable’ to the goal components.
<div id="container"> <div class="box ui-selectable"> 1 </div> <div class="box ui-selectable"> 2 </div> <div class="box ui-selectable"> 3 </div> <div class="box ui-selectable"> 4 </div> <div class="box ui-selectable"> 5 </div> <div class="box ui-selectable"> 6 </div> <div class="box ui-selectable"> 7 </div> <div class="box ui-selectable"> 8 </div> ... </div>
Initialize the Selectable plugin and performed.
var selectable = new Selectable({ // options here });
Possible options to customize the Selectable plugin.
var selectable = new Selectable({ // allows toggling of the item state. toggle: false, // auto refresh autoRefresh: true, // the minimum interval in milliseconds to wait before another resize or scroll callback is invoked. // higher numbers will increase scroll performance, but can delay item highlighting when auto scrolling. throttle: 50, // parent container appendTo: document.body, // CSS selector filter: ".ui-selectable", // how far the lasso overlaps a selectable element before it's highlighted for selection. // "touch" or "fit" tolerance: "touch", // Set to "sequential" to allow the lasso to select items sequentially instead of only the ones within the lasso. lassoSelect: "normal", // auto scroll when selecting autoScroll: { threshold: 0, increment: 10, }, // sets default ignore items ignore: false, // auto saves the current selection on mouseup / touchend. saveState: false, // limits the number of items that can be selected maxSelectable: false, // style the lasso. Must be an object of valid CSS properties and values. lasso: { border: '1px dotted #000', backgroundColor: 'rgba(52, 152, 219, 0.2)', }, // default CSS classes classes: { lasso: "ui-lasso", selected: "ui-selected", container: "ui-container", selecting: "ui-selecting", selectable: "ui-selectable", deselecting: "ui-deselecting" } });
API strategies.
var selectable = new Selectable(); // adds new items selectable.add(items); // deselects all items selectable.clear(); // deselects specific items selectable.deselect(items); // destroys the instance selectable.destroy(); // disables the instance selectable.disable(); // enables the instance selectable.enable(); // returns an item(s) reference selectable.get(items); // returns an Array of all items selectable.getItems(); // returns an Array of all selectable element nodes selectable.getNodes(); // returns an Array of all selected items selectable.getSelectedItems(); // returns an Array of all selected element nodes selectable.getSelectedNodes(); // re-init the instance selectable.init(); // inverts the selection selectable.invert(); // refreshes the items selectable.refresh(); // removes items selectable.remove(items); // selects items selectable.select(); // selects all items selectable.selectAll(); // sets the selection container selectable.setContainer(container); // "save" - saves the current selection // "undo" - moves back to the last selection // "redo" - restores the last undone selection // "clear" - removes all saved selections selectable.state(command); // updates the instance selectable.update();
Events handlers are accessible.
var selectable = new Selectable(); // selectable.on('method', fn); // selectable.off('method', fn); selectable.on("init", function() { // when ready }); selectable.on("start", function(item) { // Fires on mousedown / touchstart. }); selectable.on("drag", function(coords) { // Fires on mousemove / touchmove. }); selectable.on("end", function(selected, unselected) { // Fires on mouseup / touchend and touchcancel. }); selectable.on("selecteditem", function(item) { // Fires when an item is selected. }); selectable.on("deselecteditem", function(item) { // Fires when an item is unselected. }); selectable.on("addeditem", function(item) { // Fires when an item is added. }); selectable.on("removeditem", function(item) { // Fires when an item is removed }); selectable.on("update", function(items) { // Fires when the instance is updated. }); selectable.on("refresh", function() { // Fires when the instance is refreshed. }); selectable.on("enabled", function() { // Fires when the instance is enabled. }); selectable.on("disabled", function() { // Fires when the instance is disabled. });
Touch-enabled Selectable Plugin With JavaScript, javascript multiple select drag and drop, Selectable plugin/Github
See Demo And Download
Official Website(Mobius1): Click Here
This superior jQuery/javascript plugin is developed by Mobius1. For extra Advanced Usages, please go to the official website.
Be First to Comment