Prevent map tile images from dragging.

[AndreyKozlov1984]

I use leaflet inside an ExtJS app. I test in Chrome. I use Mac OS X, Retina display. The openstreetmaps layer images are draggable, i.e. I drag the tile img which looks weird.
This css style solves the issue: {
-webkit-user-drag: none;
user-drag: none;
}
Leaflet already uses -webkit-user-select: none. It is enough in most cases, but looks like not always.

I'll try to set up a jsfiddle example but whatever I think this extra css will not make things worse. At least that is what I use as a workaround in my current project.

[MatMatic]

Same problem happen with ImageOverlay in chrome, without ExtJS.

I resolved the problem using the solution above (-webkit-user-drag: none;}

[mourner]

@jfirebaugh take a look please

[jfirebaugh]

@ZeusTheTrueGod or @MatMatic, can you please make a JSFiddle that demonstrates the problem?

[MatMatic]

Hi,

jsfiddle with Leaflet 0.5.1 (image doesn't drag, map pan on mousedown/mousemove): http://jsfiddle.net/MatMatic/pPDLp/

Same example with Leaflet 0.6.2 (image drag, can't pan map):
http://jsfiddle.net/MatMatic/chNjM/

I know it's kind of weird to have such an image like this in a map, but hey, it's just an example ! ;)
I basically copied-pasted the example from: http://maps.mixedbredie.net/leaflet/image.html

I experimented the problem with an imageoverlay containing an image issued by a wms server (yeah, I know, there is class TileLayer.WMS).

Thx

[jfirebaugh]

@MatMatic Those fiddles are mix-and-matching 0.4.4 and 0.6.2 JS and CSS, and I'm having a hard time sorting out what's supposed to work and what isn't. Can you please try again with 0.5.1 and 0.6.2, without any script tags in the JSFiddle body -- use the JSFiddle script pane for setup code and "External Resources" for Leaflet CSS/JS. Thanks.

[MatMatic]

I cleaned everything.
Sorry, first time I used jsfiddle.

[mourner]

@jfirebaugh yep, also reproducible on /debug/map/image-overlay.html

[mourner]

@ZeusTheTrueGod your use case is not reproducible though, are you sure you updated your CSS files to new version as well?

[AndreyKozlov1984]

I have not setup the example, I am using a leaflet-rails plugin with a latest version.

On Jul 4, 2013, at 12:57 PM, Vladimir Agafonkin [email protected] wrote:

@jfirebaugh yep, also reproducible on /debug/map/image-overlay.html

—
Reply to this email directly or view it on GitHub.

[jfirebaugh]

Fixed in a1d7c12.

[AndreyKozlov1984]

Thanks, I'll try this version.

[emirotin]

Shouldn't dist be updated when Pull Request is sent?
It would make sense to always have downloadable master (especially taking into account it is directly linked from the site)
Current dist is 10 days old

[mourner]

@emirotin currently being discussed in #1354
You can also always easily build it yourself.

[emirotin]

Yes, building it right now
Still confusing to download a master zip and find dist/leaflet-src.js not having the changes I need

[tjwebb]

Same problem. And agree that if dist is in the repo, it should remain consistent with the rest of the code.

[FunkMonkey33]

Just to make sure I understand this thread:

So a1d7c12 fixes this issue (you're trying to pan the map, and you wind up dragging tiles around instead).

I can download a1d7c12, but I'll have to build it, because the dist folder still contains the compilation of the base version (0.6.2).

Did I get all that right?

Thanks.

Aaron

[danzel]

@FunkMonkey33 Check the download page http://leafletjs.com/download.html
It has links to a built version of current master and stable branches.

[emlama]

Hi guys, I wanted to check in on this issue as I'm seeing it happen with Leaflet.js 0.6.4 (via the CDN) in Firefox 24.0.

I didn't write the original code we're using but before I dig in was curious to know if this is a known issue.

[danzel]

This issue shouldn't happen in the current release of leaflet.
If you can create a minimal reproduction on jsfiddle (or if it happens on leafletjs.com) we can take a look, otherwise it's probably something in your code.

[emlama]

Thanks for the heads up. I'll take a look on Monday when I'm back in the office and look into what might be causing it.

[emlama]

@danzel We tested this today and it appears to be happening when dragging is set to disabled dragging.disable(). You can actually see it happening on the Quick Start page by entering map1.dragging.disable(); into the console using Firefox.

Again, I'm not sure if this is expected behavior and would love to know what you guys think.

[danzel]

Yes you are right!
You can also reproduce by passing dragging: false to the map construction options.
Issue seems to only happen in firefox

[danzel]

Have spent a bit of time taking a look.

If you disable dragging, the js to stop image dragging isn't set up (Map.Drag isn't set up).
In webkit we are okay as we have:

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -webkit-user-drag: none;
    }

Firefox has no equivalent attribute.
The issue doesn't happen in IE9 and I'm not sure why!

It looks like markers always set up preventDefault, so the issue doesn't happen with them.
I've done the same thing in map which seems to fix it, not sure if it is the right way though. (see linked branch)

@jfirebaugh - Thoughts?

[jfirebaugh]

I guess I wouldn't necessarily consider it a bug that the browser default drag behavior prevails if you disable Leaflet's own drag behavior. If we don't want that to be the case, we need to arrange for L.DomUtil.disableImageDrag() to be called unconditionally (and probably L.DomUtil.disableTextSelection() as well). Using preventDefault on mousedown events causes problems with focus behavior and dragging in iframes.

[mourner]

Lets close this and create a separate issue if necessary. I'm also not sure if this should be considered a bug if dragging is disabled.

[mourner]

@jfirebaugh thanks for chiming in btw!

[emlama]

Thanks for the help with this btw. This is a great library :)

[eborden]

Has this issue been resurrected anywhere? I am seeking a fix for this specific firefox behavior.

[eborden]

strike that this seems to be fixed in 0.7.*

[nara007]

jfirebaugh L.DomUtil.disableImageDrag() works like a charm, thank you ! LOL