Jump to content
GreenSock

lifeinchords

Draggable: Negative Threshold?

Recommended Posts

Hi there,

 

I'm trying to create something like this: https://scratch.mit.edu/projects/editor/?tip_bar=getStarted

 

so when dragging a block next to another one on the canvas, the snap starts *before the elements touch.

Basically, a negative threshold.

 

This got me a good way there: http://greensock.com/forums/topic/9265-draggable-snapping-to-specific-points-with-sensitivity/

looping through my elements, using hitTest to figure out which is being touched by the dragging element, and I added inset borders with box shadow and some custom logic to figure out which side to snap to....

 

but I'm not sure how to move the hitTest detection outside the bounds of the receiving element.

I tried a negative value but docs show 0% as the minimum value.

 

Looking at the source code for the Draggable.hitTest function and not sure what it's doing to extend it. Any leads, existing codepens, or ideas come to mind?

 

Any thoughts greatly appreciated,

~s

Link to comment
Share on other sites

There is no negative threshold at this time. The easiest solution is probably to nest an element with opacity:0 with your drop targets that is stacked below the visible drop target but is a bit larger than the visible target sort of like

<div class="dropGroup">
  <div class="dropTarget"></div>
 <div class="dropElement></div>
</div>

in the above .dropTarget would be the invisible, larger element that you hitTest() against.

  • Like 1
Link to comment
Share on other sites

Thanks for the reply and suggestion. I'll give that a try.

 

All the best,

~s

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