Jump to content
GreenSock

MIC74

Problem with new Draggable plugin

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

Well, I guess you are absolutely right.

Right now I don’t know why it worked before the rc4.

 

But here is a fiddle:

http://jsfiddle.net/Cyboide/uRvqZ/

 

Only the middle one, this time, is a btn. When you click on it with the mouse, you can see it turns blue. (just click it back to remove the blue)

 

So my point is, on iPad (for example), you can try to click (tap) it however you want, it won’t work, the click event does not passes through.

The dragging works fine though.

Link to comment
Share on other sites

Yes, that's because of the way iOS simulates mouse events with touches, but that's not really an issue with Draggable, nor am I aware of any way around it besides the solution I already mentioned (simply setting a data-clickable="true" on the element OR adding an onclick). That will cause Draggable to know that it should not preventDefault() on the touchstart/mousedown event. 

 

When I added data-clickable="true" to the element, it seemed to work fine on iOS (and of course it didn't drag when tapping on that element). If you've got any better ideas for solutions, I'm all ears. 

Link to comment
Share on other sites

What if, for example, I want to have a draggable filled with clickable items.

 

This : http://jsfiddle.net/CPEpf/4/
My container is basically full of clickable items so I can't scroll.

 

Looking at another example, I managed to do this: http://jsfiddle.net/CPEpf/6/

It works on desktop but not mobile.

 

Is there anything I can do?

 

PS: using upcoming version of GSAP.

Link to comment
Share on other sites

Hi,

 

What you could use is Draggable's onClick event and remove JQuery's click() method, like that when the drag ends the mouseup event wont trigger the click function, but if the drag is under 3 pixels it'll be interpreted as a click event.

 

Check the api docs:

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

You can see it here:

http://jsfiddle.net/CPEpf/7/

 

Best,

Rodrigo.

Link to comment
Share on other sites

Thank you for your input Rodrigo but unfortunately this still doesn't allow me to click each individual <div> (or other element).

 

I would like that when you click on a div.gallery-image something happens.

Right now, on mobile only, I'm unable to click on a single item.

 

This code works correctly on desktop browsers : http://jsfiddle.net/CPEpf/6/

but when I look at it on my Android phone or iOS iPod, nothing is alerted when I click on a single item.

Link to comment
Share on other sites

Hi

 

I'm getting some alerts in android 4.0, in chrome and native browsers.

 

Perhaps take it out fiddle and on a live page.

 

As a personal preference I never test fiddles or codepens on devices, specially in small ones those pages imply too much burden on those devices.

 

Best

Rodrigo

Link to comment
Share on other sites

I will check it out. I usually just check the result on my mobile device... like this

http://jsfiddle.net/CPEpf/6/embedded/result/

 

UPDATE: I took everything out and put it in a single page.

I get the draggable onClick alert but not the single div.gallery-image alert.

 

UPDATE 2: Using

onClick: function() {
    var target = $(document.elementFromPoint(this.pointerX, this.pointerY));
}

 

I can find the element that was clicked on but I've read there are compatibility problems... but I'm targeting mobile devices so I don't think it should be a problem.

Edited by Steven
Link to comment
Share on other sites

  • 4 months later...

Hello all,

 

Has anybody found a solution for element touch/click events instead of Steven's "elementFromPoint" hack?

 

In our case the Draggable container is like a mosaic filled with elements.

 

Thanks for your help!

Aritz.

Link to comment
Share on other sites

Hi Aritz and welcome to the GreenSock forums.

 

Please check that you're using the latest update of Draggable and the rest of the engine as well. There have been some major updates since the last reply in thid threas. You can download it from the button in the top-left corner that says "get GSAP" and choose the JS flavour. You could also point to the CDN links:

 

http://cdnjs.com/libraries/gsap

 

Finally if using the latest version you're still experiencing problems, please create a reduced sample so we can get a better idea of what's your particular issue. For that check the following post:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

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