Jump to content
Search Community

Move draggable element to cursor after rotation

shaunhurley 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

Hi Folks,

 

In the attached pen I have a draggable element.  Crossing a boundary (arbitrary left position of 300) the element is rotated 90 degrees.  This all work correctly, however I have a couple of questions relating to the implementation and hoping someone might have some thoughts.

 

1)  The element rotation is currently around transformOrigin "center center".  If the drag is started with the mouse cursor off-center on the element, then after the rotation the element is separated from the mouse cursor.  A preferred behaviour would probably be to move the element's center to the mouse position at the instant of rotation, or possibly translate the mouseposition into the transformOrigin.  Is there an efficient way to achieve this that I've missed? Can I do a one time tween on the element to the mouse position that will not interfere with the active drag, or something similar? Do I have to revert to a "mouse follow" versus using draggable?

 

2) In this example I'm assigning the rotation on every on-drag iteration, which presumably isn't super efficient.  Is there an optimal way to achieve this e.g. assigning an "isRotated" property to the item and checking that property before applying the rotation on each drag tick?  Would the computation for that flag check (retrieve flag, test, assign if nescessary) be inherently more or less efficient that just assigning the rotation every drag tick?

 

Many thanks as always!

 

Shaun

See the Pen ddZyrE?editors=1111 by shaunhurley (@shaunhurley) on CodePen

Link to comment
Share on other sites

Nice work! 

 

If you're concerned about performance, I'd switch to using x/y instead of left/top and then I'd run the logic more like this:

See the Pen LQOGvG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

Of course the switch to x/y means you'd have to measure things differently in terms of the offset since it's relative to the element's original position in the document flow rather than an absolute of 300px from the left or something. But that's usually not too terribly difficult to accommodate for. In fact, in some situations it makes things even easier. 

 

Let us know if you need anything else. Happy tweening!

 

  • Like 4
Link to comment
Share on other sites

2 hours ago, GreenSock said:

I forgot to mention that your codepen was using a REALLY old version of Draggable which didn't include the deltaX/deltaY feature, so I updated that in my demo. And I focused on simplifying the code (and making it as performant as possible). 

 

@Jack thanks for that, def looks cleaner with the deltaX, particularly since in my actual environment I have potentially dozens of elements to operate on - not having to use a flag is definitely going to help.

 

The codebase I'm working on is currently using top/left instead of x/y, so while its on the list of todos I'll probably have to suck up the performance hit in the short term, but I'm already in the process of abstracting absolute coordiates so hopefully can incorporate with that.

 

Thanks for your help!

 

Shaun

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