prevent container from dopping into itself

[err0r500]

Hello, I built a nested tree view and its working quite well (thanks!), except on specific "moves" where I got this error message : Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Then the container becomes a sort of black hole : everything dropped in disappears.

I found this closed issue : https://github.com/bevacqua/dragula/issues/52 but wasn't able to replicate the workaround with angular 2. Is there a way to disable temporarily a container from dropping into itself ? (if it's the real problem) Thanks, Best,

[err0r500]

Ok, this seems to work for now : Best,

constructor(private dragulaService: DragulaService) {
    dragulaService.setOptions('first-bag', {
      accepts: function (el, target, source, sibling) {
        return target.className !== 'moving';
      },
    });

    dragulaService.drag.subscribe((value) => {
      this.lockChildrenContainers(true, value.slice(1)[0]);
    });

    dragulaService.dragend.subscribe((value) => {
      this.lockChildrenContainers(false, value.slice(1)[0]);
    });
  }

  private lockChildrenContainers(lock:boolean, el:any){
    let initialState, finalState:string;
    if(lock){
      initialState = "container";
      finalState = "moving";
    }
    else{
      initialState = "moving";
      finalState = "container";
    }

   let childrenContainers = el.querySelectorAll("." + initialState);
    for(let i = 0; i < childrenContainers.length; i++){
      childrenContainers[i].className = finalState;
    }
  }

[harshpatel79]

Hi @Err0r500 ,

I got the same error but your solution didn't work for me any other workaround.

Regards

[Syforce]

You can deny all mouse events from the transit element and it won't throw that error anymore:

.gu-transit { pointer-events: none; }