DragSelect
An easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop. – Examples:
Install / Use
/learn @ThibaultJanBeyer/DragSelectREADME
DragSelect 
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.
TOC
- Project Page: Demo & Info
- Key-Features
- Why?
- Supporters
- Installation
- Usage
- Constructor Properties (Settings)
- Event Callbacks
- Methods
- CSS Classes
- Have Fun!
Project Page: Demo & Info
- 🧑💻 Project Page: https://dragselect.com/
- 📘 Docs Page: https://dragselect.com/docs/intro
Key-Features
- 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
Why?
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.
Supporters
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!
Thanks To:
LambdaTest
<a href="https://www.lambdatest.com/" target="_blank"> <picture> <source media="(prefers-color-scheme: light)" srcset="https://www.lambdatest.com/support/img/logo.svg" /> <source media="(prefers-color-scheme: dark)" srcset="https://www.lambdatest.com/resources/images/logo-white.svg" /> <img alt="LambdaTest" width="147" src="https://www.lambdatest.com/support/img/logo.svg" /> </picture> </a>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
<a href="https://www.browserstack.com/"><img src="https://cdn.worldvectorlogo.com/logos/browserstack.svg" alt="Browserstack" width="100px" /></a>
BrowserStack is a service for cross-browser testing. They support this open source projects by providing us with a free account!
DigitalOcean
<a href="https://www.digitalocean.com/"><img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_vertical_blue.svg" alt="DigitalOcean" width="150px" /></a>
DigitalOcean is a cloud hosting service. They support this open source projects by providing us with free credits!
You?
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 , imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.
Installation
Read the Getting Started.
NPM
npm install --save dragselect
Yarn
yarn add dragselect
Global
You 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.
That's it, you're ready to rock!
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.
Usage
Now in your JavaScript you can simply pass elements to the function like so:
Simple
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
Within a Scroll-Able Area
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
With DropZones
Read the DropZones Guide where you’ll also find a live example.
Extended
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.
React
Read the React Guide
Mobile/Touch usage
Re
