CloudMade/Leaflet — Issue #452: L.Map.Drag should ignore events inside popup
Author: my8bird
Created: 2012-01-31 19:47:20+00:00
State: open

I have been creating a Sencha Touch wrapper for Leaflet, https://github.com/vrsource/vrs.ux.touch/blob/master/src/vrs.ux.touch.LeafletMap.js and most parts have gone well. However, need to ability to interact with the popup, Ext.Panel. The issue is that since the map attaches to the root instead of the tilePane the popups drag events are intercepted as well. To fix this I have extended L.Map.Drag an L.Draggable so that they ignore any events bubbled from a "leaflet-popup".

Potentially, this bug could be pushed out to the other event handlers as well but my immediate needs did not push me that far.

```javascript

/** Teach the Leaflet Draggable class to ignore pop ups when dragging the canvas
* https://github.com/vrsource/Leaflet/blob/master/src/dom/Draggable.js
**/
vrs.ux.touch.LeafletDraggable = L.Draggable.extend({
_insidePopop: function(elm) {
var class_name;
while (elm.parentNode) {
class_name = elm.parentNode.className;
if (class_name && class_name.indexOf('leaflet-popup') >= 0) {
return true;
}
elm = elm.parentNode;
}
return false;
},

_onDown: function(evt) {
if (this._insidePopop(evt.target)) { return; }
return this.__proto__.__proto__._onDown.apply(this, arguments);
},
_onMove: function(evt) {
if (this._insidePopop(evt.target)) { return; }
return this.__proto__.__proto__._onMove.apply(this, arguments);
},
_onUp: function(evt) {
if (this._insidePopop(evt.target)) { return; }
return this.__proto__.__proto__._onUp.apply(this, arguments);
}
});

vrs.ux.touch._OldLeafletDrag = L.Map.Drag;
vrs.ux.touch.LeafletDrag = L.Map.Drag.extend({
addHooks: function () {
if (!this._draggable) {
// Aside for this line this is directly from Leaflet
// https://github.com/vrsource/Leaflet/blob/master/src/map/handler/Map.Drag.js
this._draggable = new vrs.ux.touch.LeafletDraggable(this._map._mapPane, this._map._container);

this._draggable
.on('dragstart', this._onDragStart, this)
.on('drag', this._onDrag, this)
.on('dragend', this._onDragEnd, this);

var options = this._map.options;

if (options.worldCopyJump && !options.continuousWorld) {
this._draggable.on('predrag', this._onPreDrag, this);
this._map.on('viewreset', this._onViewReset, this);
}
}
this._draggable.enable();
}
});
// Use our map drag instead of Leaflets
L.Map.Drag = vrs.ux.touch.LeafletDrag;
```