Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eliajf

Click test distance

Recommended Posts

Is there a way to change the click test from 3px to something greater? I'm finding in Android browsers that a Draggable object is hard to click because it has a tendency to move a very short distance when I tap the field. On most mobile browsers, 3px is extemely tiny because of retina displays, thus a larger pixel range would be beneficial.

Link to comment
Share on other sites

There isn't currently such an option, but it's not difficult to add. I've attached a preview of the next Draggable that recognizes a "minimumMovement" parameter. You can set that higher if you want. Let me know if it works well for you please. 

Draggable_0.11.0_preview.zip

  • Like 3
Link to comment
Share on other sites

  • 4 weeks later...

That is SUPER useful. When is this expected to be released?

Is there away to lock it on the x or y axis? Here is what I currently have, and works perfectly when I drag left and right. But the state change also happens when I swipe up and down.

Draggable.create( $this, {
    type            : 'x',
    edgeResistance  : 0.2,
    throwProps      : true,
    minimumMovement : 100,
    lockAxis        : true,
    maxDuration     : 0.5,
    bounds          : { minX : -gridWidth, maxX : gridWidth },
    onDragEnd : function ( e ) {
        target = e.target;
        current = ( current < childLength - 1 ) ? ++current : 0;
        updateHero( target );
        updateHeroText( target, current );
    },
    onThrowComplete : function () {
        TweenLite.set( $this, { clearProps : "transform, z-index" } );
        resetText( target );
    }
}
Link to comment
Share on other sites

Hi jermbo  :)

 

that's already included , pls download the last version of GSAP (1.15.1 )

 

minimumMovement special property to Draggable (set in the config object) that defines the minimum distance that the mouse/touch must move before being interpreted as a drag. Default is 2.
 
for now you can use something like this :
var elX;
Draggable.create(".knob",{
type:"x",
minimumMovement :50 , 
onPress:function(){ elX=this.x },
onDrag:function(){ 
if( this.x>elX || this.x<elX ){
  // your function.....
}}
});
pls check this out : 

See the Pen bNYRed by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you all. I apologize about disappearing as I thought no one responded since I didn't get any notification of a response. I downloaded 1.15/0.11. This will make a huge difference for mobile devices which seem to be more sensitive than desktop ones.

Link to comment
Share on other sites

Yes indeed. Thanks for the reminder. Done. 

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

Hi jermbo  :)

 

Now , with new version ( 1.16.0 ) , you can easily find the lockedAxis :

 

Draggable exposes the lockedAxis property so that you can find out whether it's "x" or "y".

 

pls check this out :

 

See the Pen bNYRed by MAW (@MAW) on CodePen

  • Like 2
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.
×