Project-Page | Documentation | Github | NPM | Licenses
easily add a selection algorithm to your application/website.
The documentation is being migrated to https://dragselect.com/. Find the most up to date documentation there.
- Project Page: Demo & Info
- Key-Features
- Why?
- Supporters
- Installation
- Usage
- Constructor Properties (Settings)
- Event Callbacks
- Methods
- CSS Classes
- Have Fun!
- 🧑💻 Project Page: https://dragselect.com/
- 📘 Docs Page: https://dragselect.com/docs/intro
- No dependencies
- Hyper customizable
- Replicates operating system drag-selection in the browser
- Accessibility (a11y)
- Use modifier keys to make multiple independent selections
- Select, Drag and Drop also also via keyboard
- Supports all major browsers
- Lightweight, only
- Popular:
on npm
- DragSelect was written with Performance in mind (can easily select >15.000 Elements)
- Supports SVG
- Supports mobile (touch interaction)
- Free & open source
- Easy to use
Because apparently there was nothing that does not require jquery out there.
This is better than https://jqueryui.com/selectable/ or https://jqueryui.com/draggable/ and has no dependencies.
It is used in multiple professional rich interface applications, i.e. to have a file management system. The user can select files to organize them and change their metadata, with this plugin our users could select multiple files and perform batch/bulk-operations (applying changes to multiple files at once). Another example is a huge, graphical cloud hosting manager with millions of active users. Users can select multiple servers, storages, etc. on an art-board to perform multi-operations, re-organize them, move them on the UI or batch-delete. We’re running it since January 18' it’s super helpful and very stable, let’s keep it that way. I can easily think of dozens other use-cases. I’m really keen to know how you use it in your projects, please let us know.
Please donate to support the countless hours of hard work & support. Especially if your company makes money, then there is no excuse. Thank you :)
If you're too poor or broke you can still support us with your time instead by contributing to the code!
LambdaTest is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!
BrowserStack is a service for cross-browser testing. They support this open source projects by providing us with a free account!
DigitalOcean is a cloud hosting service. They support this open source projects by providing us with free credits!
Show your appreciation and support with a donation! Direct Donation to DragSelect (via Bitcoin: 1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC). Or sponsor via GitHub Sponsors or Get in touch.
Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than
Read the Getting Started.
npm install --save dragselectyarn add dragselectYou can still download the file (minified) and add it to your document:
<script src="https://unpkg.com/dragselect@latest/dist/ds.min.js"></script>Note: if you are using
<script type=moduleyou can use theDragSelect.esm.jsords.esm.min.jsfiles as they includeexport default DragSelect
We don’t recommend the direct linking for production set-up. Please use
npmif you can.
Of course you can also just include the code within your code and bundle it to save a request.
DragSelect supports module.exports, AMD Modules with define, es6 modules with .esm versions and has a fallback to global namespace for maximum out of the box support.
Now in your JavaScript you can simply pass elements to the function like so:
Read the Simple Usage Guide
The simplest possible usage.
Choose which elements can be selected:
new DragSelect({
selectables: document.getElementsByClassName("selectable-nodes"),
});Find a live example in the Guide
Read the Area Guide
Here the selection is constrained. You can only use the selection/drag inside of the area container:
new DragSelect({
selectables: document.getElementsByClassName("selectable-nodes"),
area: document.getElementById("area"),
});Find a live example in the Area Guide
Read the DropZones Guide where you’ll also find a live example.
All options are optional. You could also just initiate the Dragselect by new DragSelect({}); without any option.
Find all possible properties and methods in the docs
Hint: you can also use the "shift", "ctrl" or "command" key to make multiple independent selections.
Read the React Guide
Read the Mobile Touch Guide
DragSelect is accessible by default:
TLDR;
=> Yourselectablesshould be buttons:<button type="button"></button>.
=> ArrowKeys are used for keyboard dragging.
Read the Accessibility Guide
Read the Custom Drag and Drop Guide
DragSelect is hyper customizable. Note, all properties are optional.
Read the Settings API docs
Moreover any setting can also be updated or added after the initialization, see post-initialization setting updates.
Any setting can be updated/added after initialization by using the setSettings method. Here is an example updating the area and the selectables:
const ds = new DragSelect({})
ds.setSettings({
selectables: document.getElementsByClassName('selectable-nodes'),
area: document.getElementById('area')
})Read the Events API docs
Event Callbacks are used like this:
ds.subscribe('<event_name>', (callback_object) => {})For all available callback event_names and their respective callback_object, please read the Events API docs
Read the Methods API docs
Read the CSS Classes API docs
Creating and maintaining useful tools is a lot of work. So don’t forget to give this repository a star if you find it useful. Star this repo, tell all your friends and start contributing and/or donating 1$ to keep it running. Thank you :)
