Dragging not working with Leaflet 1.9.2

[oisact]

With the latest Leaflet (Leaflet 1.9.2) dragging the control is not working correctly. The map itself is being dragged. There is a simple fix. Add: L.DomEvent.disableClickPropagation(this._container); To the addTo function (I'm calling it right before the return this). This disables propagation of click events through to the map.

Optionally, the functions cancelMapDrag and uncancelMapDrag are not serving any purpose, and they (and the event hooks to them) can be removed.

I have no idea what Leaflet version this first started manifesting with.

[AhXianGL]

hi, i met this problem recently too. in file leaflet-side-by-side.js _addEvents function

// leaflet-side-by-side.js
  _addEvents: function () {
    var range = this._range
    var map = this._map
    if (!map || !range) return
    map.on('move', this._updateClip, this)
    map.on('layeradd layerremove', this._updateLayers, this)
    on(range, getRangeEvent(range), this._updateClip, this)
    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
  },

I found that the L.Browser.touch is always true when i run my App on Chrome, the browser(or event listener) listen the touch instead of mouse events, this is why the 'MapDrag' event is not be canceled when i drag the side-by-side bar, so i went to leaflet doc L.Browser.touch ref, the L.Browser.touch is the key of the problem. I solve the problem by rewrite the code here in my app to

on(range, 'mousedown', cancelMapDrag, this)
on(range, 'mouseup', uncancelMapDrag, this)

but this way has a drawback that it cannot work on mobile platphone or other touchable instruments. i have an advice that L.Browser.touch ? 'touchstart' : 'mousedown' may be replaced by other methods work for distinguish the environment is mobile or PC, or we expect the author explain the code here . I am not a english native speaker, sorry for that, but hope i can make something about this issue.

[giswqs]

Downstream packages (e.g., folium, ipyleaflet) are having the same issue. @oisact Could you submit a PR to fix the issue since you already figured it out?

https://github.com/jupyter-widgets/ipyleaflet/issues/1066 https://github.com/python-visualization/folium/pull/1732

[giswqs]

Any updates on this issue? This bug essentially makes this plugin useless.

[rabenojha]

It is not working with 1.9.3 either. But thanks to the fix from @oisact .

[AHBAdmin]

Can confirm 1.9.4 still has the same issue. @oisact fix did the trick for now.

[nimchimpski]

Thanks @oisact! - simple and well explained fix for 1.9.4

[nonchain]

I tried this and worked for me. (version 2.2.0) just before adding the layers to the leaflet write this code to customize the drag event.

function getRangeEvent(range) {
  return 'input';
}
/* your logic */
L.Control.CustomCompare = L.Control.Compare.extend({
  _addEvents: function () {
    const range = this._range;
    const map = this._map;
    if (!map || !range) return;

    map.on("move", this._updateClip, this);
    map.on("layeradd layerremove", this._updateLayers, this);
    L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
    L.DomEvent.on(range, "touchstart mousedown", () => {
      map.dragging.disable();
    });
    L.DomEvent.on(range, "touchend mouseup", () => {
      map.dragging.enable();
    });
  }
});
new L.Control.CustomCompare([leftLayer], [rightLayer]).addTo(map);