Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Silverback IS

Draggable - Android issue clicking links with dragClickables:true

Recommended Posts

I'm having an issue with the draggable plugin on our new website. It was working before and I can't seem to work out what has changed. I found a few topics but the resolutions didn't appear to be relevant to my situation.

 

The website is https://www.britishwebsites.co.uk - A user can drag the map around and I'd like for the entire map to be draggable (including the landmarks/links). I've also got a click event on the links (added using jQuery) to override standard functionality using event.preventDefault();

 

On desktops and iOS devices the behaviour is as expected, however on Android you have to long tap or tap lots of times in quick succession to trigger the click event and show a category. I'd prefer not to rework the functions to work with the touchstart/mousedown and touchend/mouseup events while manually detecting the amount the map has moved, but wondered if this is the only solution?

 

I cannot seem to isolate another issue and there are no touch events with preventDefault or stopPropagation applied.

 

This is my config for initialising draggable:

var draggableConfig = {
	type:"x,y",
	edgeResistance:0.75,
	bounds:map.elems.$mapBar[0],
	//trigger:map.elems.$mapCanvas[0],
	throwProps:true,
	zIndexBoost:false,
	dragClickables:true,
	onThrowUpdate:map.update,
	onDrag:map.update,
	onDragStart:function(){
		map.updateMessageSequence(true);
		if(map.lastDragTime === false){
			map.dragStartTime = new Date().getTime();
		}
	},
	cursor:map.customCursor ? "none" : "move",
	force3D:true,
	overshootTolerance:0.2
};
this.draggableInstance = Draggable.create(map.elems.$mapCanvas[0], draggableConfig);
this.update.call(this.draggableInstance[0]);

The click event for the links which I've tried applying both before and after initialising Draggable:

map.elems.$clickable.on("click",function(e){
	e.preventDefault();
	var category = $(this).attr("href");
	woopra.track("mapClick", {category:category});
	ga('send', 'event', 'Map', 'Click', category);

	mapCats.changeCatState(category);
});

The only other code I believe may be relevant is the touch events on the SVG shapes overlaying the map:

svgMouseEvent:function(e){
	e.preventDefault();
	var $area = $(this);
	switch(e.type){
		case "mouseover":
		case "touchstart":
			if(map.customCursor){
				map.elems.$cursor.addClass("finger");
			}
			$area.data("$matchingLandmark").data("mouseover",true);
			new TweenLite.to($area.data("$matchingLandmark")[0],0.5,{autoAlpha:1});
			new TweenLite.to($area.data("$matchingLandmark").data("$labelEl")[0],0.5,{autoAlpha:1});
		break;
		case "mouseout":
		case "touchend":
			if(map.customCursor){
				map.elems.$cursor.removeClass("finger");
			}
			$area.data("$matchingLandmark").data("mouseover","tween");
			map.update.call(map.draggableInstance[0]);
		break;
	}
}

Thank you in advance if any help can be offered.

Link to post
Share on other sites

I forgot to say but the 'onClick' event on the draggable instance has the same problem. Please let me know if any more code would be helpful - thanks again.

Link to post
Share on other sites

Sorry to hear you are having problems. 

Unfortunately, we can't easily debug your live site.

In order for us to help you we will need a very simple demo that clearly illustrates the problem.

 

We recommend you create a CodePen demo that only has the bare-minimum amount of HTML, CSS and JS to illustrate a single draggable item not behaving properly. We don't need any fancy artwork or anything, just some simple divs with text or buttons. 

 

Here is a demo that loads Draggable and TweenMax: http://codepen.io/GreenSock/pen/ALBdoA

 

Hit the fork button and just starting add the code you need. When you are done, save it and post the link here.

 

Once we have the demo we will be able to test on our devices, make edits and narrow down where the issue may be coming from.

 

Also, please let us know what Adroid device, OS and browser you are using.

 

We look forward to helping you solve this problem.

Link to post
Share on other sites

Thanks Carl, it may be easier for me to strip back our current site and test step by step. If I find anything useful that may be beneficial to the rest of the community I'll definitely post it here - and if I can find a simple way to recreate the problem I'll create a CodePen.

 

Thank you for your very prompt reply.

Link to post
Share on other sites

Hi,

 

I've created a codepen here:

See the Pen GjRZLb by silverbackis (@silverbackis) on CodePen

 

With this simple implementation I can put an event on the clickable element inside the draggable element which triggers a popup. This works on iOS, desktop but fails on Chrome on Android - This can be replicated on a S7 Edge running the latest OS and a Samsung S5 OS 6.0.1 - Chrome on the S5 is version 52.0.2743.98

 

It'd be great if you can help by letting me know if there's a more recommended way of implementing this functionality.

 

Thanks again.

 

Daniel

Link to post
Share on other sites

For more information, it appeared to work once on the device - but it may be similar to our website where the click functionality works before the element has been dragged a first time.

Link to post
Share on other sites

This isn't documented, but this will allow the event to go through.

Draggable.create(foo, {
  allowEventDefault: true
});

Be careful about doing that because it might cause other issues. In Webkit, mouse and touch events are handled separately, and in IE/Edge, the default touchmove behavior is to pan the screen. You might be better off letting Draggable handle the click. Just check the event target for an href property like so...

See the Pen 9d581a9f3b162376c2afb53d2c6529ed by osublake (@osublake) on CodePen

  • Like 2
Link to post
Share on other sites

Thanks very much for this, it's been very helpful - it's revealed there must be something else interfering some how. The onClick handler on draggable has the same behaviour issue where the triggerElement needs to be tapped multiple times to trigger the event. I can see the CodePen works well though so it cannot be an issue with Greensock. Allowing the default event doesn't make a difference either. It is strange because once I manage to trigger that event, without dragging the area the click event triggers without an issue, as soon as I drag the element again, I have to tap lots of times. I'll keep plugging away at it. Thanks again!

Link to post
Share on other sites

I'm curious if it'd help if you tried setting allowNativeTouchScrolling:false on your Draggable. Some Android devices are really weird with how they handle touch and native scrolling. Mind trying that and letting us know? 

  • Like 2
Link to post
Share on other sites

I've just tried that which didn't work unfortunately - but thank you for the help. I imagine it is to do with how I've structured my HTML and the way I'm positioning the SVG shapes with a link surrounding them. Even though in the inspector I can hover over the links and they appear to be there and in the correct place I have a feeling it's got something to do with it. I'm setting up a test page on my site where I can continue to play step-by-step with what works and what doesn't.

 

I don't know at what point it stopped working but it may have even been a browser update or something. If I take draggable off completely, those links don't appear to be clickable on the android devices. I can see now from experience that Android Chrome is very odd with how it handles touch/click events.

 

I'll be back on here when I figure it out :)

Link to post
Share on other sites

After stripping out the draggable plugin until the links were working again, I've built it back up and realise the solution by OSUBlake is great and fixes the issue - thank you!

 

Firstly, I had read that the xlink namespace was deprecated, but by not using the namespace, link links surrounding the SVG shapes were not clickable even without initialising the draggable plugin. So I got the links working again without draggable then the fun began.

 

Without the 'allowEventDefault' value being true, not even the onClick event on Draggable will fire. By setting it to true, I can get the onClick from Draggable and the click event on the link themselves. I've only enabled that for Android mobile devices so far ( very useful mobile detection scripts here https://github.com/kaimallea/isMobile ). I have more testing to do on Explorer/Edge but thanks for helping get to this stage!

  • Like 1
Link to post
Share on other sites

If it helps anyone else I've also found out that if you have a link surrounding an SVG shape/polygon, adding touchstart/touchend events to the shape or the link seems to result in the link having to be clicked many times on Chrome for Android.

 

As a result, I will have to use those events and detect the distance moved manually to trigger a click like event. Probably a browser bug.

  • Like 2
Link to post
Share on other sites

Thanks for letting us know! It may help someone else who stumbles across that glitch in the future. 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×