Nested Drag and Drop in with Angular 7 Material CDK

Question

I've got a nested tree (Not the tree component) of drag and drop lists.

When dragging items around in drop lists that are contained inside of another drop list - Enter / Exit events are firing for both drop lists, meaning that when an item is dropped it could either be dropped into the inner drop list or the container drop list depending where it was dropped (Note: These lists are all linked to each other)

I'm thinking at the moment that the best solution will to be suppress events firing for the container list if the drag is currently over an inner list but I'm not sure if this is the best solution or exactly how to do it at the moment.

Fogarty

I think material's drag and drop still have many features need to do.may be you could search in official github issues. – Bucky

@Bucky I did manage to get this working, although i'm sure as Material's drag and drop CDK evolves so will the solution. – Fogarty

Answer 1

I did manage to find a solution to this, although it's definitely hacky and involves accessing a private value with the Angular drag and drop CDK.

I use the cdkDropListEnterPredicate function to check which list it should be trying to drop into, which i assign the canDropPredicate function.

I'm also forced to get access to the pointer position via: _pointerPositionAtLastDirectionChange which isn't great as not all the values I'd like to see passed into the cdkDropListEnterPredicate get passed.

canDropPredicate(): Function {
    const me = this;
    return (drag: CdkDrag<ResourceNode>, drop: CdkDropList<ResourceNode>): boolean => {
        const fromBounds = drag.dropContainer.element.nativeElement.getBoundingClientRect();
        const toBounds = drop.element.nativeElement.getBoundingClientRect();

        if (!me.intersect(fromBounds, toBounds)) {
            return true;
        }

        // This gross but allows us to access a private field for now.
        const pointerPosition: Point = drag['_dragRef']['_pointerPositionAtLastDirectionChange'];
        // They Intersect with each other so we need to do some calculations here.
        if (me.insideOf(fromBounds, toBounds)) {
          return !me.pointInsideOf(pointerPosition, fromBounds);
        }

        if (me.insideOf(toBounds, fromBounds) && me.pointInsideOf(pointerPosition, toBounds)) {
          return true;
        }
         return false;
    };
}

intersect(r1: DOMRect | ClientRect, r2: DOMRect | ClientRect): boolean {
    return !(r2.left > r1.right ||
        r2.right < r1.left ||
        r2.top > r1.bottom ||
        r2.bottom < r1.top);
}

insideOf(innerRect: DOMRect | ClientRect, outerRect: DOMRect | ClientRect): boolean {
    return innerRect.left >= outerRect.left &&
        innerRect.right <= outerRect.right &&
        innerRect.top >= outerRect.top &&
        innerRect.bottom <= outerRect.bottom &&
        !(
            innerRect.left === outerRect.left &&
            innerRect.right === outerRect.right &&
            innerRect.top === outerRect.top &&
            innerRect.bottom === outerRect.bottom
        );
}

pointInsideOf(position: Point, rect: DOMRect | ClientRect) {
  return position.x >= rect.left &&
        position.x <= rect.right &&
        position.y >= rect.top &&
        position.y <= rect.bottom;
}

Fogarty

you extend the component? – Bucky

This is within my tree component (No relation to the Angular Tree component) and I set the cdkDropListEnterPredicate to canDropPredicate – Fogarty

@anewtonlevey is there any progress regarding nested lists? would you like to share a stackblitz? – Protective

Doesn't work? How would setting the canDropPredicate do anything for nested lists? – Denominator

canDropPredicate normally just returns true, so by checking the intersection I can determine that we can drop into the inner list and return false for the outer list. – Fogarty

You can listen to cdkDragMoved event tosave pointer position there, instead of accessing private properties – Patella

We eventually rewrote the component to not have to have nested tree views, going with something more akin to the file explorer on Mac – Fogarty

Answer 2

The problem with this solution is that the predicate does not affect already ongoing drag within CdkDropList where the drag originated.

This is a problem because while moving objects 'up' the hierarchy works (because of the predicate function), moving, for example, one item under it's sibling, 'down' in hierarchy causes unavoidable overlap of 2 CdkDropLists areas which will result in race condition.

This is the main problem that needs solving - how to arbitrary tell parent CdkDropList to 'stop considering' the CdkDrag (reacting to the drag) while still being able to effectively drop it in the child CdkDropList

Or in other words - get all of CdkDropLists pierced by Z axis of X,Y marked by pointer position, choose one with the smallest area (the 'youngest') and make the rest 'non responsive' to current drag.

Junji

Yeah it's definitely clunky. The can drop predicate gets called often enough that you can find your way into the smaller list eventually, it's a pain though. When I get the chance I might split this into a seperate repo and maybe as a community we can get to a better implementation – Fogarty