code: function setupDropzone (el, accept) {
    interact(el)
      .on('dropactivate', e => { console.log(e.type); e.reject(); })
      .dropzone({
        accept: accept,
        ondropactivate: function (event) {
          addClass(event.relatedTarget, '-drop-possible');
        },
        ondropdeactivate: function (event) {
          removeClass(event.relatedTarget, '-drop-possible');
        },
      })
      .on('dropactivate', function (event) {
        const active = event.target.getAttribute('active')|0;
  
        // change style if it was previously not active
        if (active === 0) {
          addClass(event.target, '-drop-possible');
          event.target.textContent = 'Drop me here!';
        }
  
        event.target.setAttribute('active', active + 1);
      })
      .on('dropdeactivate', function (event) {
        const active = event.target.getAttribute('active')|0;
  
        // change style if it was previously active
        // but will no longer be active
        if (active === 1) {
          removeClass(event.target, '-drop-possible');
          event.target.textContent = 'Dropzone';
        }
  
        event.target.setAttribute('active', active - 1);
      })
      .on('dragenter', function (event) {
        addClass(event.target, '-drop-over');
        event.relatedTarget.textContent = 'I\'m in';
      })
      .on('dragleave', function (event) {
        removeClass(event.target, '-drop-over');
        event.relatedTarget.textContent = 'Drag me…';
      })
      .on('drop', function (event) {
        removeClass(event.target, '-drop-over');
        event.relatedTarget.textContent = 'Dropped';
      });
  }
docs: Setup a given element as a dropzone.
  
  @param {HTMLElement|String} el
  @param {String} accept