Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent map tile images from dragging. #1821

Closed
AndreyKozlov1984 opened this issue Jul 3, 2013 · 30 comments
Closed

Prevent map tile images from dragging. #1821

AndreyKozlov1984 opened this issue Jul 3, 2013 · 30 comments
Assignees
Labels
blocker Critical issue or PR that must be resolved before the next release
Milestone

Comments

@AndreyKozlov1984
Copy link

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
Copy link

MatMatic commented Jul 3, 2013

Same problem happen with ImageOverlay in chrome, without ExtJS.

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

@mourner
Copy link
Member

mourner commented Jul 3, 2013

@jfirebaugh take a look please

@jfirebaugh
Copy link
Member

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

@MatMatic
Copy link

MatMatic commented Jul 3, 2013

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
Copy link
Member

@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
Copy link

MatMatic commented Jul 3, 2013

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

@ghost ghost assigned jfirebaugh Jul 4, 2013
@mourner
Copy link
Member

mourner commented Jul 4, 2013

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

@mourner
Copy link
Member

mourner commented Jul 4, 2013

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

@AndreyKozlov1984
Copy link
Author

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 added a commit that referenced this issue Jul 8, 2013
-webkit-user-drag is not inherited, so it's ineffective
at preventing drags of image overlays (#1821). Instead,
always preventDefault on dragstart.

While here, preventDefault on selectstart as well (a
"belt-and-suspenders" approach).

Together, these changes bring Leaflet's strategy in line
with D3's:

https://github.com/mbostock/d3/blob/master/src/event/drag.js
@jfirebaugh
Copy link
Member

Fixed in a1d7c12.

@AndreyKozlov1984
Copy link
Author

Thanks, I'll try this version.

@emirotin
Copy link

emirotin commented Jul 8, 2013

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
Copy link
Member

mourner commented Jul 8, 2013

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

@emirotin
Copy link

emirotin commented Jul 8, 2013

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
Copy link

tjwebb commented Jul 9, 2013

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

@FunkMonkey33
Copy link

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
Copy link
Member

danzel commented Jul 16, 2013

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

@emlama
Copy link

emlama commented Oct 4, 2013

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
Copy link
Member

danzel commented Oct 4, 2013

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
Copy link

emlama commented Oct 6, 2013

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
Copy link

emlama commented Oct 7, 2013

@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
Copy link
Member

danzel commented Oct 7, 2013

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 danzel reopened this Oct 7, 2013
@danzel
Copy link
Member

danzel commented Oct 7, 2013

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
Copy link
Member

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
Copy link
Member

mourner commented Oct 21, 2013

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 mourner closed this as completed Oct 21, 2013
@mourner
Copy link
Member

mourner commented Oct 21, 2013

@jfirebaugh thanks for chiming in btw!

@emlama
Copy link

emlama commented Oct 22, 2013

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

@eborden
Copy link

eborden commented Feb 4, 2014

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

@eborden
Copy link

eborden commented Feb 4, 2014

strike that this seems to be fixed in 0.7.*

@nara007
Copy link

nara007 commented Jan 18, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocker Critical issue or PR that must be resolved before the next release
Projects
None yet
Development

No branches or pull requests