Skip to main content

With DropZones

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

  • Set it up via Settings.
  • When dropped you’ll find a dropTarget in the DS:end event callback.
  • You can also use some useful methods related to DropZones.
  • Using DropZones will also automatically add respective classes.

Here is an example:

The Setup

Setting up is easy, here is an example:

const ds = new DragSelect({

// 1. Add DropZones settings
dropZones: [
// 2. By default all selectables can be dropped into a zone
{ element: document.querySelector('#zone-1'), id: 'zone-1' },
// 3. However, if you want to restrict that, add the `droppables` key to the zone
{ element: document.querySelector('#zone-2'), id: 'zone-2', droppables: document.querySelectorAll('#item-2,#item-4') }, // here, only items 2 & 4 are droppable into zone 2
// 4. There are also other customization you can do, for example:
dropInsideThreshold: 1, // 1 = has to be 100% inside the dropzone, 0.5 = 50% inside, 0 = just touching is fine

Find all possible keys in the DropZone Settings section.

The DS:end callback

Now you will see the dropTarget in the DS:end callback, which represents the topmost Zone that was targeted by the mouse on drag release. Here is an example on how you could use it:

ds.subscribe('DS:end', ({
// 4. If successfully drop by mouse, you’ll find a dropTarget key
dropTarget: {
// 5. It is an object with following keys
id: "zone-1", // The ID of the zone
element: <node />, // The DropZone element itself
droppables: [ <node />,], // The elements that can potentially be dropped into that zone
itemsDropped: [ <node />,], // elements that were selected when the mouse targeted the zone on drop
itemsInside: [ <node />,] // elements that are actually inside the bounds of the dropzone
}) => {

// 6. We can check which items are dropped into the zone and do something
if(dropTarget?.itemsDropped?.length) {
console.log('Dropped', dropTarget.itemsDropped, 'into',;

Check out the callback object API for more information.

The methods

You can also anytime use the DropZone specific methods to get what you need. For example:

console.log('items dropped into zone-1', ds.getItemsDroppedByZoneId('zone-1'))
console.log('items inside zone-2', ds.getItemsInsideByZoneId('zone-1'))

Check out the DropZone specific methods for more information.


Try it out yourself: