Skip to main content

DragSelect

The DragSelect logo: a selection symbol, a hand, a drop symbol and a mouse within a selection square.
Build Status gzip size npm downloads count No Dependency Contributors Welcome Sponsors Welcome

Key-Features

  • No dependencies No Dependency
  • 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 gzip size
  • Popular: npm downloads count 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

demo-gif

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. We use it currently in a professional rich interface application where we have a file management system. The user can select files to organize them and change their metadata, with this plugin our users are able to select multiple files and perform batch/bulk-operations (applying changes to multiple files at once). We also use it in production for another huge, graphical cloud hosting manager with millions of active users. Users can select multiple servers, storages, etc. on an artboard to perform multi-operations, re-organize them, move them on the UI or batch-delete. We’re running it in production 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. We’re really keen to know how you use it in your projects, please let us know.

Supporters

Donate Star

Please donate to support the countless hours of hard work & support. Especially if your company makes money, then there is no excuse. If you're broke, you can still support us with your time instead by contributing to the code!

Thank you :)

Thanks to:

BrowserstackDigitalOceanYou?
LambdaTest is an automated service for ross-browser testing. They support this open source projects by providing us with a free account and with a generous direct 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!Thank and support us by making a 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 npm downloads count, imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this did not happen). If you donate, we can display your logo here if you want, which will give you fame, fortune and help you recruit great talent and boosting your SEO.

Licenses

TL;DR: If your project makes money: Purchase a commercial license.

DragSelect is, and will forever be, a free and open-source tool. Free for any non-commercial project. However, this is a lot of work and hard work should be rewarded, so if you are using DragSelect for business and/or commercial sites, projects, and applications you’ll have to get the commercial license to keep your source proprietary and the project alive.