Draggable: Negative Threshold?

[lifeinchords]

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

[Carl]

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.

[Jonathan]

Great solution Carl

[lifeinchords]

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

 

All the best,

~s