Project-Page | Documentation | Github | NPM |

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
  • Thanks To:
• Installation
  • NPM
  • Yarn
  • Global
  • Bower (deprecated)
  • That's it, you're ready to rock!
• Usage
  • Simple
  • Within a Scroll-Able Area
  • With DropZones
  • Extended
  • React
  • Mobile/Touch usage
  • Accessibility (a11y)
  • Use Your Own Drag & Drop
• Constructor Properties (Settings)
  • Post-Initialization Setting-Updates
• Event Callbacks
  • Events
    • Callback Object Keys
• Methods
• CSS Classes
• Have Fun!

Project Page: Demo & Info

https://dragselect.com/

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. 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 started using it in production for a huge, graphical cloud hosting manager with a lot 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 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 me 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:

		You?
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 , 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.

Installation

Read the Getting Started.

NPM

npm install --save dragselect

Yarn

yarn add dragselect

Global

Just download the file (minified) and add it to your document:

<script src="https://dragselect.com/v2/ds.min.js"></script>

Note: if you are using <script type=module you can use the DragSelect.es6m.js or ds.es6m.min.js files as they include export default DragSelect

We don't recommend the direct linking for production set-up since you'll not benefit from versioning. Please use npm if you can.

Bower (deprecated)

bower install --save dragselect

Note: the Bower project is deprecated. Please use npm instead. If you have to use bower, you'll have to build the project after installing it via npm run rollup

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 .es6m 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

Example of DropZones. DropZones are areas where you can drop the selected elements into.

const ds = new DragSelect({
  selectables: document.querySelectorAll('.selectable-nodes'),
  area: document.querySelector('#area'),
  dropZones: [
    { element: document.querySelector('#zone-1'), id: 'zone-1' }, // all selectables can be dropped into zone 1
    { element: document.querySelector('#zone-2'), id: 'zone-2', droppables: document.querySelectorAll('#item-2,#item-4') }, // only items 2 and 4 are droppable
  ],
  dropInsideThreshold: 1, // 1 = has to be 100% inside the dropzone, 0.5 = 50% inside, 0 = just touching is fine
});

ds.subscribe('callback', ({
  dropTarget: {
      id: "zone-1",
      element: <node />,
      droppables: [ <node />, … ],
      itemsDropped: [ <node />, … ], // elements that were selected on drop
      itemsInside: [ <node />, … ] // elements that are inside the bounds of the dropzone
  }) => {
  if(dropTarget?.itemsDropped?.length) {
    // do something
    console.log('Dropped', dropTarget.itemsDropped, 'into', dropTarget.id);
  }
})

This will also add some respective classes

Find a live example in the guide

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

// if you add the function to a variable like this, you have access to all its functions
const ds = new DragSelect({
  // all settings are optional and can be added later
});

// this is how you add/update settings after initialization
ds.setSettings({
  // node/nodes that can be selected. By default will never add elements twice:
  selectables: document.querySelectorAll('.selectable-nodes'),
  // area in which you can drag. If not provided it will be the whole document & body/documentElement.
  area: document.getElementById('area'),
  // and many more, see "properties" section in the docs
})

// fired once the user releases the mouse. (items) = selected nodes:
ds.subscribe('callback', ({ items, event }) => {})
// returns all currently selected nodes:
ds.getSelection();
// Teardown/stop the whole functionality:
ds.stop();
// Reset the functionality after a teardown:
ds.start();

// and many more, see "methods" section in documentation

You can also use the "shift", "ctrl" or "command" key to make multiple independent selections.

React

Read the React Guide

Mobile/Touch usage

Read the Mobile Touch Guide

Accessibility (a11y)

DragSelect is accessible by default:

TLDR;
=> Your selectables should be buttons: <button type="button"></button>.
=> ArrowKeys are used for keyboard dragging.

Read the Accessibility Guide

Use Your Own Drag & Drop

Read the Custom Drag and Drop Guide

Constructor Properties (Settings)

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.

Here is the full list:

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')
})

Event Callbacks

Read the Events API docs

Event Callbacks are used like this:

ds.subscribe('<event_name>', (callback_object) => {})

Events

Read the Events API docs

Note: all your callbacks subscribers will run happen after the internal code ran. If you want to run something before everything else, use the pre prefix. I.e. predragstart is an event that runs before any internal start logic.

Callback Object Keys

Read the Callback Object docs

Note: all object keys are optional and might not be available, depending on the event type. So make sure to check for availability first

Methods

Read the Methods API docs

CSS Classes

Read the CSS Classes API docs

note: you can change the class names setting the respective property on the constructor, see the docs properties section.

Have Fun!

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 :)

http://dragselect.com/ | documentation