Description
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.
Selectable alternatives and similar libraries
Based on the "Misc" category.
Alternatively, view Selectable alternatives based on common mentions on social networks and blogs.
-
-
list.js
The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. -
InversifyJS
A powerful and lightweight inversion of control container for JavaScript & Node.js apps powered by TypeScript. -
-
mixitup
A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more -
surveyjs
Free Open-Source JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout that lets you load and run multiple web forms, or build your own self-hosted form management system, retaining all sensitive data on your servers. You have total freedom of choice as to the backend, because any server + database combination is fully compatible. -
-
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Selectable or a related project?
README
[Selectable](selectable.png?raw=true "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.
- 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.
Pull requests are welcome!
Demo | Documentation | Changelog | Table Plugin
Demos
- 2d Transformed Elements
- Checkboxes
- Table Plugin (see Mobius1/Selectable-Table-Plugin)
- Advanced Usage
Integration with other libs
- with Dropzone (enyo/dropzone)
- with Sortable (SortableJS/Sortable)
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")
});
NOTE: <a> elements will not work currently. See: https://github.com/Mobius1/Selectable/issues/31
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
Public Methods
Events
If this project helps you then you can grab me a coffee or beer to say thanks.
Copyright © 2017 Karl Saunders | BSD & MIT license
*Note that all licence references and agreements mentioned in the Selectable README section above
are relevant to that project's source code only.