Jump to content
Search Community

Draggable element catching up to cursor

luke_nukem_3d 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 there, 

 

I'm having what I would have thought to be a common problem, but can't find a neat solution to it. I have created a simple recreation of it in the code pen below.

 

Try dragging the blue draggable into the grey square, and when you are over the grey square allow the mouse to come outside the draggable slightly which will let the grey box expand. 

 

When the box expands the draggable is now far behind the pointer (probably the distance the box has expanded). I want to get the draggable to catch up with the mouse pointer. Have tried tweening by a calculated distance in the 'onDrag' hook, but this seems to cause it to keep jumping back and forth.

 

See the Pen wyPXJx by lukeekulluke (@lukeekulluke) on CodePen

 

 

 

Thanks in advance for any help anyone can give me, really appreciated.

See the Pen wyPXJx by lukeekulluke (@lukeekulluke) on CodePen

Link to comment
Share on other sites

Hi and welcome to the forums,

 

Thanks for the demo. Its a big help.

This seems like a fairly troublesome scenario in the way its setup. 

I think a bigger issue than the jump, is the fact that the hover of expandable will not be triggered as the mouse is dragging the draggable. 

Its only when you pull the mouse a little bit away from the draggable that the hover gets triggered as you explained:

 

Try dragging the blue draggable into the grey square, and when you are over the grey square allow the mouse to come outside the draggable slightly which will let the grey box expand. 

 

It seems to me that users are going to be kind of startled by that type of inconsistent behavior. The first few times I interacted with the demo I thought the expand happened when I rolled over the text inside expandable... but after a few tries I realized it was just coincidence. 

 

An easy win here seems to be:

 

1: give draggable a position of absolute

2: place it in the dom before your expandable

3: use Draggable's hitTest() to see if you are overlapping (hiting) the expandable area

 

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

 

Perhaps someone else has a clever way of handling this without changing your DOM around, but I think it would take quite a bit of finagling to get it right.

 

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi Carl, thanks for your quick reply.

 

The demo is rather a simplified version of the actual problem (which does not involve the behaviour with the hovering triggering the expansion), it was just a way of recreating my actual problem in a very simplistic fashion.

 

My actual use case, does use the hitTest() method to determine whether the container should expand or not, and that part of it works very smoothly. Its just that if that container expands by a large amount then your draggable object is suddenly nowhere near your mouse pointer.

 

Due to the way that my data is bound to the DOM elements, its not really possible to position the Draggable object absolutely, although I can see that would be a possible solution. 

 

Apologies for the over simplified Code Pen as I think it caused some confusion.

Link to comment
Share on other sites

no wories about the simplified demo, its always good to start small with these things. 

That said i really don't have a solution at the moment. Perhaps a demo a little close to have going on in production will help, especially something with the hit detection in place. I'm really not sure what the best way is to account for the expanding container moving the element out of the way.

Link to comment
Share on other sites

Yeah, the problem is that you're changing around the document flow underneath Draggable mid-drag. But how about this solution?: 

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

 

It basically figures out the height difference and then ends the current drag and starts it again as if the user just pressed down on it in its new position (after the document reflow). Make sense? 

 

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