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 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 callback

Now you will see the dropTarget in the 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('callback', ({
// 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', dropTarget.id);
}
})

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.

Example

Try it out yourself: