Jump to content
GreenSock

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

find the ending location of a dragged object

Recommended Posts

Hi,

I need to get the current position of a dragged object on the completion of its tweening to another location. Here is my code:

 

Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer",
  onDragEnd: function(e) {

if (this.hitTest(dropAreasArray[0], overlapThreshold)) {
      TweenMax.to(this.target, 0.5, {x:ecksPos, y:wyePos, onComplete:resetPermissionsArray_Target});
      //disAbleTiles2("2nd");
      studentAnswer = "EXPRESSION";
      removeCheckAnsButton1(false);
      function resetPermissionsArray_Target() {
        var firstTileLocus_X = $("#firstNamedQuanDragImage1").offset();
        var firstTileLeft = firstTileLocus_X.left;
        alert("location of first tile is: " + firstTileLeft);
      }

 

With this code I get the object location just fine but the tween ends and the object does not continue to its desired x/y position

If I remove the the onComplete and its function the tweening completes just fine but, obviously, no position info on the object.

Thank you for your invaluable assistance - I'm getting there! 

Share this post


Link to post
Share on other sites

Funny, I was literally just working on these docs.

 

Have you looked into Draggable's .endX and .endY properties? 

  • Like 2

Share this post


Link to post
Share on other sites

No, and thank you for your almost instantaneous response! I will do it now...

Share this post


Link to post
Share on other sites

If you're inside of the onDragEnd the .x and .y should be able to be used as well.

Share this post


Link to post
Share on other sites

Will this give me the object's relative position within its stated bounds? Might you give me an example of its use in a Draggable function? Thank you!

Share this post


Link to post
Share on other sites

What is the code to access the x/y properties of the object being dragged. I've seen the x/y property used but it's always referred to as element.x. How do you use dot syntax with a div object that has an ID?

Share this post


Link to post
Share on other sites

You'd use this.x in the callback. this inside of Draggable callbacks returns the Drabble object itself unless you specifically set the scope using one of the on____Scrope (like onDragScrope) functions.

 

Modifying your code from above, you could get the values like so:

 

Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer",
  onDragEnd: function(e) {
	console.log("x: " + this.x + ", y: " + this.y);
  }
});

 

  • Like 2

Share this post


Link to post
Share on other sites

Yes. I get the x/y coordinates but the the tween doesn't complete. When I put your "this.x..." in the onComplete function x/y comes back undefined. Why would the tween not complete? Some other part of my code must be wrong...

Share this post


Link to post
Share on other sites

It would be helpful if you provided a minimal example of your draggable code in something like a CodePen for us to see exactly what the issue is and more properly understand what you're trying to do. 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

OK. I'll give it a try.

Share this post


Link to post
Share on other sites

Hello Zach,

 

I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×