AustinNotAustin Posted September 15, 2021 Share Posted September 15, 2021 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 More sharing options...
GreenSock Posted September 15, 2021 Share Posted September 15, 2021 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 More sharing options...
AustinNotAustin Posted September 15, 2021 Author Share Posted September 15, 2021 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 More sharing options...
OSUblake Posted September 15, 2021 Share Posted September 15, 2021 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)); 2 1 Link to comment Share on other sites More sharing options...
AustinNotAustin Posted September 15, 2021 Author Share Posted September 15, 2021 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. 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 More sharing options...
GreenSock Posted September 15, 2021 Share Posted September 15, 2021 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); 2 Link to comment Share on other sites More sharing options...
AustinNotAustin Posted September 15, 2021 Author Share Posted September 15, 2021 Okay, thanks for the tip. I like it If I can get the codepen working I'll update this thread. Thanks you two. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now