Jump to content
GreenSock

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

.startDrag()

Recommended Posts

Hey everyone,

I read through the doc on both version 2 and 3 for the .startDrag() method. I am still a bit confused on its implementation. What parameters should I be passing it? I passed some x and y coords that I thought would make the startDrag be called from my objects center, but instead it drags from the top left corner. I've tried many different coord values. 

I'm currently calling the .startDrag() method on the object in question. Is this the correct usage?

See the Pen NWgwweY?editors=1010 by AustinNotAustin (@AustinNotAustin) on CodePen

Link to comment
Share on other sites

It's pretty tough to diagnose without a minimal demo, but you should pass .startDrag() the MouseEvent or PointerEvent or TouchEvent that it should use to determine the position of the mouse/pointer/touch. It needs that information to appropriately measure distances and know where it started. 

Link to comment
Share on other sites

Okay, thanks.

Which value does startDrag use from the event? e.g. screenX, clientX, x, offsetX, pageX, ect..

Or does it use more than one of those values?

Link to comment
Share on other sites

18 minutes ago, AustinNotAustin said:

Or does it use more than one of those values?

 

It's checking a lot stuff, like it's type, touches, pageX/Y, etc. It's best to pass in a real event instead of trying to make a synthetic event.

 

myElement.addEventListener("click", e => myDraggable.startDrag(e));

 

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

Thanks you two,

 

My problem exists when I click a button to make an object, the objects position is bound to another separate div. There is then a gap between where the newly created panel is from the div in which I clicked/held down to create said obj.

 

Here's a screen shot. 435779272_ScreenShot2021-09-15at9_08_54AM.png.69bbd6a422b5b14ee92d15900c927c31.png

 

 

 

 

On a separate note:

 

I attempted to recreate the problem as simplistic as possible on codepen (see above updated original post), but it seems I'm doing something incorrectly. 

When making a new draggable object, would this be an appropriate implementation?

Make a class, 
   Make a variable of the class be the draggable, 
   Reference the parent class' draggable variable when need.

Like this --> class SomeObject {
                             constructor( ...   make the class
                                      this.draggable = Draggable.create('# ... make the draggable variable 

Then reference the draggable via the parent class obj
        let obj = new SomeObject();
        obj.draggable['0'].startDrag(event);

Is this the proper use of a draggable?

Link to comment
Share on other sites

I don't think we can provide much help without a minimal demo, sorry. 

 

Some of your terminology looked incorrect, but the overall concept you described with your pseudo code seemed fine. FYI, since Draggable.create() returns an Array of Draggables (in case your selector text referred to multiple elements), if you know it'll just be one you can:

this.draggable = Draggable.create(...)[0];

So that then later you can:

this.draggable.startDrag(event);

 

  • Like 2
Link to comment
Share on other sites

Okay, thanks for the tip. I like it 

 

If I can get the codepen working I'll update this thread. 

 

Thanks you two.

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