Changing size of dropzone element

[fiatjaf]

I have some code that goes like this (this is Coffeescript, please understand):

    interact(document.querySelector 'div#dropzone')
      .dropzone(true)
      .accept('.draggable')
      .on('dragenter', (e) ->
        t = e.target
        if e.target != e.relatedTarget.parentElement.parentElement
          draggieSize = e.relatedTarget.offsetHeight
          t.style.height = "#{t.offsetHeight + draggieSize}px"
      )
      .on('dragleave', (e) ->
        e.target.style.height = ''
      )
      .on('drop', (e) =>
        @props.onDropDoc e
        e.target.style.height = ''
      )

I want to enlarge the dropzone when I arrive dragging some element, so there's more area to drop. But, despite being enlarged when I arrive with the dragged element, when I move the mouse, still dragging the element, from the original dropzone size to the enlarged part of the dropzone, the dropzone shrinks, as if the added height of the element wasn't part of the interactable.

What can I do?

[taye]

You can change the interact.dynamicDrop setting so that the sizes and positions of the dropzones are recalculated everytime a dragmove happens.

Calling interact.dynamicDrop(true) should make the dropzones work as you expected them to.

[fiatjaf]

Ah, I forgot to thank you for this!

[taye]

Hehe. You're welcome! :D