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: