bevacqua/react-dragula

Nested Containers not working

essekia opened this issue · 4 comments

The drag event does not trigger when I try to drag an element which is also a container ( to its children ). If I remove its container "privilege", I can drag it.

I am using react-dragula@1.1.15.

Can anyone tell me how they got the nested draggable containers working? I cannot seem to be able to do that.

Doesn't this part of the code prevent that?

function canStart (item) {
    if (drake.dragging && _mirror) {
      return;
    }
    if (isContainer(item)) {
      return; // don't drag container itself
    }

@cfenzo , tried your solution, doesn't seem to work for me. Not sure if this is an issue with react or my own setup. Has anyone tried nested containers with react?

Same problem here :S. I'm looking for a workaround but nothing yet

A PR for this issue was created quite a while back in the Dragula repo.

bevacqua/dragula#358

I was able to hack up a solution by modifying the source code.

I commented out that return; // don't drag container itself line, but that caused the following line inside of function drag (e) to throw all these exceptions:

dropTarget.insertBefore(item, reference);

reference at this point is null. To avoid making my console from logging out all exceptions. I just wrapped it in a try...catch block. The solution sits as such:

  function drag (e) {

    ...

    if (
      (reference === null && changed) ||
      reference !== item &&
      reference !== nextEl(item)
    ) {
      _currentSibling = reference;
      try {
         dropTarget.insertBefore(item, reference);
      }
      catch (e) {}

      drake.emit('shadow', item, dropTarget, _source);
    }
    function moved (type) { drake.emit(type, item, _lastDropTarget, _source); }
    function over () { if (changed) { moved('over'); } }
    function out () { if (_lastDropTarget) { moved('out'); } }
  }

Of course this is not a good solution given the purpose of these wrappers is to not modify the source code.... but until bevacqua/dragula#358 finds it's way into the source code, this is the best solution I could come up with.