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', 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: