find the ending location of a dragged object

[Xristi]

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! 

[ZachSaucier]

Funny, I was literally just working on these docs.

 

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

[Xristi]

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

[ZachSaucier]

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

[Xristi]

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!

[Xristi]

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?

[ZachSaucier]

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);
  }
});

 

[Xristi]

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

[ZachSaucier]

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. 

 

 

[Xristi]

OK. I'll give it a try.

[Xristi]

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.