Jump to content
Search Community

Expose lockedAxis variable in draggable object

usheeen 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

It would be really useful to know which axis a draggable is locked to. Would it be possible to expose the lockedAxis variable from Draggable.js ~ line 1231.

 

I've been reimplementing it as a utility function but better to only calculate once. Every little counts towards performance :)

In the meanwhile if anyone wants util function to calculate locekdAxis, here it is:

 function AxisTest(){
    var axis,
        startingX,
        startingY,
        xDiff,
        yDiff;

    this.set = function(x, y){
      axis = undefined;
      startingX = x;
      startingY = y;
    }

    this.update = function(x, y){
      xDiff = Math.abs(x - startingX);
      yDiff = Math.abs(y - startingY);

      if(!axis){
        if(xDiff > 3){
          axis = "x";
        }
        else if(yDiff > 3){
          axis = "y";
        }
      }

      return axis;
    }
  }

To use simply set( ) onPress and update( ) onDrag.

See the Pen zyxgh by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I didn't really give you a use case to justify this request so here it is:

 

I have a carousel of cards, when dragging horizontally I want them to move freely with dragResistance = 0. Dragging vertically dismisses the cards so I want some resistance.

Link to comment
Share on other sites

Sure, that makes sense. Thanks for sharing the rationale too. I attached an updated version that not only exposes the lockedAxis variable, but it also has a new getDirection() method which gives you some neat capabilities:

  1. returns "left", "right", "up", "down", "left-up", "right-up", "left-down", or "right-down" according to the direction that the user dragged since onPress. If it's type:"rotation", it will return "clockwise" or "counter-clockwise".
  2. You can pass an element in as the first parameter to have it report the direction from that element. For example, if you're dragging elementA and you want to see if it's to the right, left, top, bottom, etc. of elementB, you'd call elementADraggable.getDirection( elementB );
  3. If you have ThrowPropsPlugin loaded, you can tap into its moment-by-moment velocity tracking to determine the momentary direction (instead of measuring it from onPress). To enable this, simply pass "velocity" as the first parameter, like:
    Draggable.create("#myID", {
        onDrag: function() {
            console.log(this.getDirection("velocity"));
        }
    });

Think this is a worthwhile addition? Seems like a fair number of folks might appreciate it. It's not a terribly expensive method either. I'm open to suggestions here before we push this into the official version. 

 

FYI, this is based on a codepen I created a while back to show people how to do direction sensing: http://codepen.io/GreenSock/pen/zyxgh. So basically this new version would wrap those capabilities into Draggable itself instead of requiring those extra functions from the codepen. 

 

Jack

Draggable_0.12.0_preview3.zip

  • Like 3
Link to comment
Share on other sites

What about a way to update the position it is being measured from instead of always using the position set by the onPress?

 

Do you mean an absolute position on the page (harder) or a specific x/y value according to the target's own x/y (easier)? Can you provide a practical use case for such a feature? 

Link to comment
Share on other sites

According to the target's own x/y. Although I was just thinking about its current position when I wrote that.

 

I implemented something sort of like this in that tile sorting demo. When checking for a collision, it also checks the direction of the draggable to make sure it is heading in the same direction as the tile it is hitting. If I only used the onPress position, my direction readings would not be correct.

Link to comment
Share on other sites

I just updated the zip and description above so that you can now pass in an element to getDirection() and it'll report the direction from that element. In other words, if you're dragging elementA and you want to see if it's up, down, left, right, etc. of elementB, you'd call elementADraggable.getDirection(elementB). 

 

Now that first parameter can be any of the following: 

  1. "start" (the default) - reports from wherever it was onPress
  2. "velocity" - reports the momentary direction based on the velocity (requires ThrowPropsPlugin)
  3. element - reports the direction from the element to the Draggable's target.

Blake, does that help? I'm not sure I totally understood your description, but I'm pretty sure that with the 3 options for measurement, all the bases are covered. Let me know if I'm missing something though. It sounded like you were either talking about #2 or #3. 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

I'm particularly interested in a users intent when they are dragging so getDirection method will be very useful.

 

In it's most basic usage, I'd say it's comparable to scroll events, i.e. you might want to know whether you are scrolling up or down. With a draggable you have more directions to contend with, so that's one less thing to calculate.

 

EDIT: I think I misunderstood your statement. I thought you were asking why it would be useful.

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