jquery-ui 可拖动 取消父级的拖动

Question

我有一个控制台(div(绝对位于leafletJS地图的顶部。我已经使用jquery-ui draggable插件使其可拖动。

问题是，当我拖动控制台时，底层地图也在拖动。我不确定要在哪个元素上stopImmediatePropagation哪个事件以及何时。有什么想法吗？我尝试取消start和stop处理程序上的click事件，但无济于事。(它包装为Angular2+ Directive(。

import {Directive, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
declare var $: any;
@Directive({
    selector: '[skinDraggable]'
})
export class DraggableDirective implements OnInit {
    @Input('containmentSelector') containmentSelector: string;
    constructor(private el: ElementRef) {}
    ngOnInit() {
        var me = this;
        /** legacy since its available and ng has no decent equivalent */
        $( this.el.nativeElement )
            .draggable({
                containment: this.containmentSelector,
                scroll: false,
                start: (event, ui) => {
                    // event.toElement is the element that was responsible
                    // for triggering this event. The handle, in case of a draggable.
                    $( event.originalEvent.target ).one('click', function(e){ e.stopImmediatePropagation(); } );
                }
            });
        this.el.nativeElement.style.cursor = "move";
    }
}

Answer 1

通过在mousedown上禁用传单拖动然后在mouseup上重新启用它来做到这一点。代码显示了一些ngrx/store，但实际上正在调用leafletMap.dragging.enable() and disable()，但仅当目标是覆盖(而不是地图(时。

import {Directive, ElementRef, OnInit} from '@angular/core';
import {DraggableDirective} from "../../../widgets/draggable.directive";
import {Store} from "@ngrx/store";
import * as fromRoot from '../../../app.reducer';
import * as toolbarActions from '../../map-toolbar/map-toolbar.actions';
@Directive({
    selector: '[skinPrintOverlayDraggable]'
})
export class PrintOverlayDraggableDirective extends DraggableDirective implements OnInit {
    constructor(
        el: ElementRef,
        private store: Store<fromRoot.State>
    ) {
        super(el);
    }
    ngOnInit()
    {
        super.ngOnInit();
        //* preventing the map panning when the user drags the print overlay */
        const mapContainer = document.querySelector('#map-container');
        const map = document.querySelector('.mapboxgl-map');
        mapContainer.addEventListener('mousedown', e => {
            if (e.target === map) return true;
            this.store.dispatch(new toolbarActions.SwitchDragPanActive(false));
        });
        mapContainer.addEventListener('mouseup', e => {
            if (e.target === map) return true;
            this.store.dispatch(new toolbarActions.SwitchDragPanActive(true));
        });
    }
}