Nested Drag and Drop in with Angular 7 Material CD

问题:

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.

回答1:

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.

回答2:

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;
}