Problem with new Draggable plugin

[MIC74 0 Likes (Newbie)]

 

hi,

first of all, thanks for the new draggable stuff, really awesome!

 

i think, there's a strange behaviour when using the draggable plugin on mobile devices:

 

i build a draggable div with hyperlinks inside. dragging works as expected while the links inside the draggable div don't work anymore. on desktop browser everything works fine. seems if there is a problem with the touch events in the draggable.js. here's the demo...

 

http://dev.tm74.de/dragtest/

 

any idea?

thx

 

michael

[Chrysto 143 Likes (Specialist)]

Hi and welcome to forums,

 

on iPod Touch I get the click event, however it isn't going to the page. I saw your href is "http://wwwgoogle.com" try to add the coma "http://www.google.com". I've had issues with mobile and malformed urls before( ajax request worked on desktop, didn't worked on mobile ), see if this will helps. Also, I created my own test and the function on click works. 

[MIC74 0 Likes (Newbie)]

 

hi bassta,

the missing dot in the url is now there ;-p

but still the same issue, the link does not work.

no idea...

 

testetd on iphone 5 & htc one

[GreenSock 18,261 Likes (Superhero)]

Would you mind testing the attached [updated] version of Draggable and letting me know if it resolves things for you? 

Draggable.js.zip

[MIC74 0 Likes (Newbie)]

 

hi jack,

thanks for the new file. i've replaced it now,

but still no luck on mobile...

 

http://dev.tm74.de/dragtest/

 

maybe, it has something to do with jquery?

without jquery, the link works fine, but dragging doesn't anymore ;-p

[GreenSock 18,261 Likes (Superhero)]

Ah yes, it looks like it has to do with the preventDefault() of the touchstart event which is actually essential for things to work on Android properly, but I have added some code that looks to see if the target of the event is an <a> or if it has an onClick and if either of those conditions is true, it will skip the preventDefault(). Let me know if this works well for you please (see attached)

Draggable.js.zip

[MIC74 0 Likes (Newbie)]

 

hi jack, nice support, thanks!

 

everything fine now!

 

regards

[MIC74 0 Likes (Newbie)]

 

ah, still one little problem:

 

seems to me, that only text links do well. when i wrap a link around another html text,

there's still the same effect: desktop works fine, mobile doesn't do anything by touching the div

 

please take a look...

 

http://dev.tm74.de/dragtest/

 

thanks!

[jamiejefferson 1,199 Likes (Superhero)]

Can you try adding the following style to #newlink3 ?

pointer-events: none;

This should allow the event to pass to your anchor.

[MIC74 0 Likes (Newbie)]

 

thanks jamie, that does the trick!

[MIC74 0 Likes (Newbie)]

 

hmm, unfortunatelly this does not work with absolute positioned elements...

 

http://dev.tm74.de/dragtest/

[jamiejefferson 1,199 Likes (Superhero)]

This now seems like more of a general CSS/JS issue, so I've setup a codepen that doesn't use any of the Greensock/Draggable classes to illustrate it more clearly (hopefully):

See the Pen EuFpm by jamiejefferson (@jamiejefferson) on CodePen

 

The absolute positioning is causing issues with the target of the mousedown event which Draggable uses (obviously) to begin dragging. For link pass-through, Draggable needs the target element of the event to either be an anchor or have an onclick registered.

 

In this codepen, a1-a8 are the anchors we want the click events to occur on. You should see that links a4, a5 and a6 are not providing the required event target. Only a7 and a8 (of the 'absolute' examples) are working as needed.

[martis 32 Likes (Newbie)]

Is this still the case with draggable? You have to define the events in the HTML with onClick? Is there a way assign the onClick events using jQuery?

[GreenSock 18,261 Likes (Superhero)]

How about if we add the ability for Draggable to recognize a "data-clickable" attribute? If the clicked element has data-clickable="true" then it won't call the event's preventDefault() method. 

 

You can use jQuery to add data attributes pretty easily. 

 

Does this sound like a good solution for you? I've attached a preview of 0.8.2 that adds this feature. Please kick the tires and let us know if it works well for you. 

Draggable_0.8.2_preview.zip

[martis 32 Likes (Newbie)]

Very cool Jack,

 

I will give this a shot today, thanks!

[martis 32 Likes (Newbie)]

I got the new draggable version hooked up and tried a simple test on the top image of my site...
 

$hoboMain.data( "data-clickable", true);
            
    $hoboMain.click( function(event) {
    alert('clicked');
});

I get the alert in a desktop browser, but no go on iOS, any ideas?

 

here is the CSS for that element...

.imageHolder {
    position: relative;
    overflow: hidden;
    text-align: left;
    width: 1000px;
    height: 815px;
    margin: 0px auto 90px auto;
}

This site: http://thegeminisociety.com/gia_proxy3/

[GreenSock 18,261 Likes (Superhero)]

There are a few problems:

1. You were defining the data incorrectly (you don't include "data-" for jQuery's data() method): 
   BAD: $hoboMain.data("data-clickable", true);
   BETTER: $hoboMain.data("clickable", true);
2. jQuery doesn't store the data in the proper standards-compliant way, as part of an attribute on the actual element (like <div data-draggable="true"></div>). Instead, it stores the data internally (inside jQuery's cache object). It does that in order to allow complex data types. Draggable, however, aims to avoid any dependencies on jQuery so we don't want to inject code to look things up inside jQuery. 

You can use jQuery's attr() method, though, because that does indeed add the attribute appropriately. Like:

$hoboMain.attr("data-clickable", "true");

I have also attached an updated Draggable preview that looks to see if the clicked element is an <input> or <textarea> or <a> or <button> and if so, it won't call the event's preventDefault(). 

 

Does this work well for you? 

Draggable_0.8.2_preview3.zip

[martis 32 Likes (Newbie)]

Ahh, thanks for the clarification. I will hook up the new draggable and play around with it more tomorrow. Thanks again for being so helpful Jack!

[martis 32 Likes (Newbie)]

Hey Jack,

 

I was able to get click events working on an element inside the containing div, but not the containing div itself...

<!-- HOBO -->
<div id="hoboMain" class="imageHolder">
	<img id="hoboImage" class="singleImage" src="img/image-main.jpg" alt="image-main" width="1000" height="815" />
	<div id="introCoverTop" class="coverTopStatic"></div>
	<div id="introCoverBot" class="coverBotStatic"></div>
</div>

.imageHolder {
	position: relative;
	overflow: hidden;
	text-align: left;
	width: 1000px;
	height: 815px;
	margin: 0px auto 90px auto;
}

.singleImage {	
	position: absolute;
}

Works:

$hoboImage.attr("data-clickable", "true");

$hoboImage.click( function(event) {
	alert('clicked');
});

Does not work:

$hoboMain.attr("data-clickable", "true");
			
$hoboMain.click( function(event) {
	alert('clicked');
});

[GreenSock 18,261 Likes (Superhero)]

Ah yes, the ancestor nodes. I guess it'd make sense to loop through those recursively and look for data-clickable. I've attached a preview of GSAP 1.11.0 that has this accommodation. Would you mind taking a peek and letting us know if it works well for you? 

GSAP_1.11.0_rc1.zip

[martis 32 Likes (Newbie)]

Fixed! It now correctly checks ancestor nodes

[Cyboide 3 Likes (Newbie)]

Hi,

 

I recently began implementing Draggable in a web app, I just love it!

 

Yet I had a couple of bugs. One of them is, in iPad, some btns inside de scrollable content didn’t trigger at all ; they are DIV elements with a mouse event attached to them.

 

I didn’t like the data-clickable patch because it requires to change the existing code here and there although it worked.

 

So this bug (??) was simply resolved when e.click is added in the _isClickable function, version 0.9.0 (dowloadable from a previous answer).

Apparently, the e.onclick will not recognize an event added with click (from addEventListener).

_isClickable = function(e) {
	return (!e || !e.getAttribute) ? false : (e.onclick || e.click || _clickableTagExp.test(e.nodeName + "") || e.getAttribute("data-clickable")) ? true : _isClickable(e.parentNode);
}

[GreenSock 18,261 Likes (Superhero)]

Thanks for posting about this - I'll add that to the official release when we push it out. 

[Cyboide 3 Likes (Newbie)]

Hi again,

 

With the rc4 pre-release for tests, apparently the e.click proposed is not present.

Though I add it back to try, now it doesn’t seem to be working...

 

You have made many changes for that 0.9.1, so, for my part, I don’t know what to propose now...

[GreenSock 18,261 Likes (Superhero)]

Right, that was intentional (sorry I neglected to mention this) - the problem with adding the e.click check is that it's ALWAYS true! Try adding a console.log(e.click) in that function and you'll see what I mean.