Jump to content
Search Community

Problem with new Draggable plugin

MIC74 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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

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

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

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

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

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

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.
×
×
  • Create New...