Jump to content
GreenSock

MIC74

Problem with new Draggable plugin

Recommended Posts

 

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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

Draggable.js.zip

Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

 

hi jack, nice support, thanks!

 

everything fine now!

 

regards

Link to comment
Share on other sites

 

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!

Link to comment
Share on other sites

Can you try adding the following style to #newlink3 ?

pointer-events: none;

This should allow the event to pass to your anchor.

Link to comment
Share on other sites

 

thanks jamie, that does the trick!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Very cool Jack,

 

I will give this a shot today, thanks!

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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');
});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Fixed! It now correctly checks ancestor nodes :)

Link to comment
Share on other sites

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);
}
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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. 

Link to comment
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.
×