Skip to main content

Getting Started

DragSelect is a small but professional, cross platform library with no dependencies that adds a selection mechanism similar to your operating system to the browser. It allows you to select multiple elements and drag and drop them around.

Let's discover how to use DragSelect in less than 2 minutes. You don’t believe me? It’s very easy, you’ll see!

🧩 Installation (Install it)​

You can download the binary files and add them to your document. Or better use a Content Delivery Network (CDN). Or even better install it via a package manager like NPM:

npm i -S dragselect

🎸 That's it, you're ready to rock! (Use it)​

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:

import DragSelect from "dragselect";

const ds = new DragSelect({
selectables: document.querySelectorAll(".selectable"),
});

ds.subscribe("DS:end", (e) => {
console.log(e);
});

🎬 Aaaand action! (See it)​

Pssst: try using your keyboard only or selecting multiple elements with Shift. It just works ;-)

Within a scroll-able Area​

With DropZones​

πŸ“š What next?​

Most importantly:

Creating and maintaining useful tools is a lot of work. Thank you :-)

Learn​

This page is just a very brief introduction showcasing a limited set of the many features. DragSelect is ultra extensible and feature rich! Make sure to read the guides and the documentation. If you’re stuck feel free to reach out on Github.

Typewriter Gif