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 .es6m 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('callback', (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:

  • If you like what you see, make sure to Star DragSelect
  • Tell all your friends/colleagues.
  • If you think it is worth continuing developing & maintaining DragSelect, please Sponsor or contribute!

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