mobius1-selectable

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.

Demo | Documentation | Changelog

---

Demos

• Tables
• Advanced Usage

---

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

// Intitialise Selectable
const selectable = new Selectable(options);

// Listen for the 'selectable.XXXX' event
selectable.on('selectable.XXXX', function(/* params */) {
    // Do something when 'selectable.XXXX' fires
});

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