jquery-ui draggable cancel drag for parent

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

jquery-ui draggable cancel drag for parent

jquery-ui draggable cancel drag for parent

jquery-ui

jquery-ui-draggable

leaflet