jquery-ui draggable cancel drag for parent - jquery-ui

Question

I have a console (div) absolutely positioned a top a leafletJS map. I have made it draggable using jquery-ui draggable plugin.
The problem is, when I drag the console the underlying map is also dragging. I am unsure as to which event on which element to stopImmediatePropagation on and when. Any ideas? I tried cancelling the click event on both start and stop handlers, but to no avail. (its wrapped as an 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

Made it, by disabling leaflet dragging on mousedown and then reenabling it on mouseup. The code shows some ngrx/store, but effectively leafletMap.dragging.enable() and disable() are being called, but only when the target is the overlay (not the map).
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));
});
}
}