Directive Not Responding Due To Same Mouse Events Being Used In Multiple Directives On Same Element

I have a feature where box can be dragged and dropped into the grey area(Please refer to the stackblitz link) Once the box is dragged and dropped , the box can only be moved within

Solution 1:

Here is implementation of Drag&Drop directive, sorry can't fix your code because it's a mess same as resize:

Directive

@Directive({
  selector: '[draggable]'
})classDraggableimplementsonInit{
    private element: HTMLElement;
    private handlerNode: HTMLElement;
    privatedata: {x: number, y: number};

    @Input('draggable')private handler: string;

    @HostListener('mousedown', ['$event'])
    mousedown(e) {
        if (e.target === this.handlerNode) {
            var rect = this.element.getBoundingClientRect();
            this.data = {
                x: e.clientX - rect.left,
                y: e.clientY - rect.top
            };
        } else {
            delete this.data;
        }
    }

    @HostListener('document:mouseup', ['$event'])
    mouseup(e) {
        delete this.data;
    }
    constructor(@Inject(ElementRef) element: ElementRef) {
        this.element = element.nativeElement;
    }
    ngOnInit() {
        this.element.classList.add('dragabble');
        this.handlerNode = this.element.querySelector(this.handler);
    }

    @HostListener('document:mousemove', ['$event'])
    onPointerMove(e: PointerEvent): void {
        if (this.data) {
            var x = e.clientX - this.data.x;
            var y = e.clientY - this.data.y;
            this.element.style.left = x + 'px';
            this.element.style.top = y + 'px';
        }
    }
}

CSS

.dragabble.handler {
    position: absolute;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    left: 6px;
    top: 6px;
}

Template:

<div [resize]="toggle"style="left: 100px; top: 50px"
     [draggable]="'.handler'"><divclass="handler">xxx</div></div>

Demo: https://codepen.io/jcubic/pen/wvwJNqQ?editors=0110

Solution 2:

One small hack you can do is add 'resizing' class to the element in resize directive and check whether that class is present in draggable directive if present do not make it draggable. I can't get your code because it's so difficult. I don't know why you made this so complex.