Jump to content
Search Community

Draggable type rotation tap problem

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

 

I have a problem with draggable...I made a knob button...when I drag it (turning it around itself) it works good...But on mobile when I tap it, its rotating and firing drag event...cannot run my click action...is there any way to solve this problem?

 

Draggable.create(".btnCnt", {

   type: "rotation",

   throwProps: false,

   onDrag: function () {

        $('.radMenuBtn .btnCnt').addClass("noclick")

   },

   onDragEnd: function () {

       $('.radMenuBtn .btnCnt').removeClass("noclick")

   }

});

 

thanks...

 

 

Link to comment
Share on other sites

Ok I solved this problem...minimumMovement value solving this issue...

Another question is;

If minimumMovement less than 10px disable rotation...Is that possible? Because when I tap my button its rotating a little...I want to make it not rotate if minMove less than 10 px...I want to make click effect to my button...

 

 

Link to comment
Share on other sites

Ah, okay, I see what you're talking about. Yes, minimumMovement was designed for regular x/y drags (total pixel movement), not rotational dragging. However, I think it's a good idea to add that capability, so I'll do so in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). That'll interpret minimumMovement as degrees when used with type:"rotation". That should make it very simple for you. 

 

In the mean time, if you want a solution with the current version, here's an example of using onPress and onDrag to limit dragging until a threshold of 45 degrees is reached: 

 

Does that help?

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

On 9/12/2017 at 9:15 AM, GreenSock said:

Ah, okay, I see what you're talking about. Yes, minimumMovement was designed for regular x/y drags (total pixel movement), not rotational dragging. However, I think it's a good idea to add that capability, so I'll do so in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). That'll interpret minimumMovement as degrees when used with type:"rotation". That should make it very simple for you. 

 

In the mean time, if you want a solution with the current version, here's an example of using onPress and onDrag to limit dragging until a threshold of 45 degrees is reached: 

 

Does that help?

 

Thanks Jack. You are great. Its working well but I removed these lines:

 

if (!this.checkThreshold) {

    return;

}

 

If I use this statement Its stopping to rotate when I tune...I don't know whats the meaning of this for you. Just keep in your mind. Thanks again. You are all great people.

 

I will share my project with you when finished. You can see your script while working....

 

 

 

  • Like 1
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...