overly sensitive drag event

[jeroen]

I have some geojson polygons on top of my leaflet map, which have onclick handler attached to them to select or unselect the area. Things work fine, however some users have complained that the clicking sometimes does not work.

What turns out to be the problem is that the drag event is overly sensitive. If the user has even the tiniest mouse movement while clicking (which often happens when you're rapidly mousing and clicking through the screen) the event will turn into a drag event instead of a click event.

Maybe you should consider setting or increasing the minimum mouse movement distance that is needed before a click actually turns into a drag event. I'm quite sure this is the case for other similar applications. E.g. try click&dragging the New Issue button on the top of this screen. It won't turn until a drag after a centimeter or so.

[mourner]

Makes sense, I'll think about this — thanks for the report!

[jeroen]

Would there be an easy way for me to hack this in 0.4.2? It's really quite annoying.

[mourner]

You can hack this by initializing some count on dragstart and counting on drag, and then doing map.fire('click') on dragend if count is not more than some threshold.

[jeroen]

Hmmm. Are the map events working in 0.4.2? I just tried the example but the events are not firing at all:

var map = new L.Map('map',{
    center: [34.0522222, -118.2427778],
    zoom: 10,
    layers: cloudmade
});
map.on('click', function(e) {
    alert(e.latlng);
});

[mourner]

@jeroenooms very weird, events are working fine for everyone else. Does the console say something? What browser / OS?

[jeroen]

Not seeing anything in firebug... I'm testing on Ubuntu with FF 14... let me do some more debugging

[jeroen]

Alright I fixed the issue. Because I had polygons over the map, the click event was only fired for the polygons, not for the map itself.

Now where in the dragstartand dragend event do I get the latlng? The event itself only has properties type and target. Why doesn't it fire a mouseEvent?

//var dragpoint;
map.on("dragstart", function(s){
    var handler = function(e){
        alert("Old point: "+ s.latlng);
        alert("New point: "+ e.latlng);
        this.removeEventListener("dragend", handler);
    };
    this.on("dragend", handler);
});

@mourner

[inpursuit]

I was able to accomplish this by modifying dom/Draggable.js. I added a "_dragBuffer" variable initialized to "5" (pixels) and then modified the _onMove method. _onMove was already returning if diffVec.x and diffVec.y were 0 so I just added another check to see if diffVec.x and diffVec.y where less than the _dragBuffer variable:

if ((!diffVec.x && !diffVec.y) || (Math.abs(diffVec.x) < this._dragBuffer && Math.abs(diffVec.y) < this._dragBuffer)) { return; }

[mourner]

Investigating this problem further, I realized that there's already a mechanism that solves the sensitive drag issue — see https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js#L143-L145. Perhaps just increasing the tolerance value will fix the original problem?

Will reopen if it's still a relevant issue.

[ekaitzht]

I have the same problem, how I can modify Draggable.js to increase the tolerance in my project? The only option is to edit Draggable.js? Thank you!

[ekaitzht]

Hi @mourner, you wrote https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js#L143-L145 however the Draggable.js has less than 143 lines.

Sorry for inconvenience caused.

[mourner]

@ekaitzht yeah, I think it's now here https://github.com/Leaflet/Leaflet/blob/master/src/dom/Draggable.js#L83-L85

[ekaitzht]

Thank you @mouner but I resolved the problem calculating the distance when I receive event object form 'dragend' event.

distance = e.target.dragging._draggable._newPos.distanceTo(e.target.dragging._draggable._startPos);
if (distance > 8) {
       BE.mapView._reloadPermits();
 }

Perhaps it's not the best thing but it works. 💃