NAV Navbar
version 1.4.0-rc.2

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:

Property Description
target The dropzone element
dropzone The dropzone Interactable
relatedTarget The element that’s being dragged
draggable The Interactable that’s being dragged
dragEvent The related drag event – drag{start,move,end}
timeStamp Time of the event
type The 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:

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 elemnt
                     draggable,         // draggable Interactable
                     draggableElement) {// draggable element

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

The checker function takes the following arguments:

arg Description
dragEvent related dragmove or dragend event
event The user move/up/end Event related to the dragEvent
dropped The value from the default drop checker
dropzone The dropzone interactable
dropElement The dropzone element
draggable The Interactable being dragged
draggableElement The actual element that’s being dragged