NAV

Dropzone

Dropzones define elements that draggable targets can be "dropped" into and which elements will be accepted. Like with drag events, drop events don't modify the DOM to re-parent elements. You will have to do this in your own event listeners if you need this.

interact(dropTarget)
  .dropzone({
    ondrop: function (event) {
      alert(event.relatedTarget.id
            + ' was dropped into '
            + event.target.id)
    }
  })
  .on('dropactivate', function (event) {
    event.target.classList.add('drop-activated')
  })

Dropzone Events

Dropzone events are plain objects with the following properties:

PropertyDescription
targetThe dropzone element
dropzoneThe dropzone Interactable
relatedTargetThe element that's being dragged
draggableThe Interactable that's being dragged
dragEventThe related drag event – drag{start,move,end}
timeStampTime of the event
typeThe event type
interact('.dropzone').dropzone({
  accept: '.drag0, .drag1',
});

accept

The dropzone accept option is a CSS selector or element which must match the dragged element in order for drop events to be fired.

interact(target).dropzone({
  overlap: 0.25
});

The overlap option sets how drops are checked for. The allowed values are:

  • 'pointer' – the pointer must be over the dropzone (default)
  • 'center' – the draggable element's center must be over the dropzone
  • a number from 0-1 which is the (intersection area) / (draggable area). e.g. 0.5 for drop to happen when half of the area of the draggable is over the dropzone

checker

The checker option is a function that you set to additionally check if a dragged element can be dropped into a dropzone.

interact(target).dropzone({
  checker: function (dragEvent,         // related dragmove or dragend
                     event,             // Touch, Pointer or Mouse Event
                     dropped,           // bool default checker result
                     dropzone,          // dropzone Interactable
                     dropElement,       // dropzone element
                     draggable,         // draggable Interactable
                     draggableElement) {// draggable element

    // only allow drops into empty dropzone elements
    return dropped && !dropElement.hasChildNodes();
  }
});

The checker function takes the following arguments:

ArgDescription
dragEventrelated dragmove or dragend event
eventThe user move/up/end Event related to the dragEvent
droppedThe value from the default drop checker
dropzoneThe dropzone interactable
dropElementThe dropzone element
draggableThe Interactable being dragged
draggableElementThe actual element that's being dragged