Question

我有一个控制台（div）绝对定位在leafletJS地图的顶部。我使用jquery-ui draggable插件使其可以拖动。

问题是，当我拖动控制台时，底层地图也在拖动。我不确定哪个元素在stopImmediatePropagation上和哪个元素上发生。有任何想法吗？我尝试取消click和start处理程序上的stop事件，但无济于事。（它包裹为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取消父母的拖动

1 个答案: