Selectable
Inspired by the jQuery UI Selectable plugin. Functionality and options are identical to the jQuery UI version with some additions and performance enhancements.
Selectable mimics the Windows file / directory behaviour, i.e. click and / or drag to select items, hold CTRL to select multiple or hold SHIFT to select consecutive groups of items.
Works in most modern deskop and mobile browsers including IE9+ as well a touchscreen devices.
Selectable is still in active development and therefore the API is in constant flux until v1.0.0
. Check back regularly for any changes and make sure you have the latest version installed.
Demos
Tables
Install
Bower
bower install mobius1-selectable --save
npm
npm install mobius1-selectable --save
Browser
Grab the file from one of the CDNs and include it in your page:
https://unpkg.com/mobius1-selectable@latest/selectable.min.js
or
https://cdn.jsdelivr.net/npm/mobius1-selectable@latest/selectable.min.js
You can replace latest
with the required release number if needed.
Initialise the plugin:
const selectable = new Selectable(options);
Options
See Documentation
Public Methods
See Documentation
Events
const selectable = new Selectable(options);
selectable.on('selectable.XXXX', function() {
});
Name | Fired | Params |
---|
selectable.init | when the instance is ready | |
selectable.enable | when the instance is enabled | |
selectable.disable | when the instance is disabled | |
selectable.start | on mousedown / touchstart (within container) | element - the item that was clicked on |
selectable.drag | when dragging the lasso | coords - the coords of the lasso |
selectable.end | on mouseup / touchend (within container) | items - the current selection of item(s) |
selectable.select | when an item is selected | item - the selected item |
selectable.unselect | when an item is unselected | item - the unselected item |
selectable.update | when the instance is updated | |
selectable.recalculate | when the item coords are recalculated | |
Copyright © 2017 Karl Saunders | BSD & MIT license