Touch enabled selectable plugin inspired by the jQuery UI widget.
Mobius1
Mobius1 v0.15.6
Latest commit c6a1df0 Dec 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs v0.15.6 Dec 9, 2018
src Prevent deselection when using scrollbars Nov 20, 2018
tests Update Nov 10, 2018
.gitignore Update Nov 10, 2018
LICENSE Update Nov 10, 2018
README.md Update README Nov 20, 2018
bower.json v0.15.6 Dec 9, 2018
karma.conf.js Update Nov 10, 2018
package.json v0.15.6 Dec 9, 2018
selectable.js v0.15.6 Dec 9, 2018
selectable.min.js v0.15.6 Dec 9, 2018
selectable.png Update logo Nov 6, 2018

README.md

Selectable

Maintenance Code Climate maintainability npm license GitHub release npm GitHub issues GitHub issues

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.

  • No dependencies
  • Lightweight
  • IE9+
  • Touch enabled

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.

v1.0.0-beta is availble, but is not recommended for production use.

Demo | Documentation | Changelog | Table Plugin


Demos


Install

Bower

bower install selectable.js --save

npm

npm install selectable.js --save

Browser

Grab the file from one of the CDNs and include it in your page:

https://unpkg.com/selectable.js@latest/selectable.min.js

or

https://cdn.jsdelivr.net/npm/selectable.js@latest/selectable.min.js

You can replace latest with the required release number if needed.


Default

This will create a new instance and add any element found in the DOM with the "ui-selectable" class name and make them selectable.

const selectable = new Selectable();

Custom filter

If you don't add the "ui-selectable" class name to your items then simply tell the instance what to look for instead with the filter option:

const selectable = new Selectable({
   filter: ".my-classname"
});

// or

const selectable = new Selectable({
   filter: document.querySelectorAll(".my-classname")
});

No items

If your document doesn't have any selectable items yet, e.g. they're added asynchronously via an ajax call, then simply create a new instance as normal, then use the add() method when they're available:

const selectable = new Selectable();

// items added to DOM ...

// then...
selectable.add(items);

Options

See Options


Public Methods

See Public Methods


Events

See Events


Copyright © 2017 Karl Saunders | BSD & MIT license