Draggable Hittest Percent hit?

[marcfolio 1 Likes (Newbie)]

Draggable has a hitTest that you can declare percent overlap, but I'm wonder if there's a way to see how much of a percent is overlapping? 

 

this.hitTest("#ele", "10%")

 

BUT is it possible to get "this" elements percent overlapping the hitTest ele?

 

 

[GreenSock 8,117 Likes (Superhero)]

No, sorry, there isn't a built-in way to get the overlapping percent with Draggable. I'm curious what the use case is for that. In other words, why would that be helpful for you? What's the real-world scenario?

[marcfolio 1 Likes (Newbie)]

Thanks for the quick reply.

 

In my use case I have a side element that fades in as the draggable element gets closer to the target or basically as the hitTest gets closer to 100%.

 

Right now I solved it with a REALLY UGLY if statement.

 

NOT my proudest moment, it's crunch time. REALLY thanks of the reply. Love the draggable plugin. SAVED MY BACON.

 

if(this.hitTest("#hit-test", "90%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.1});

}else if(this.hitTest("#hit-test", "80%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.2});

}else if (this.hitTest("#hit-test", "70%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.3});

}else if (this.hitTest("#hit-test", "60%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.4});

}else if (this.hitTest("#hit-test", "50%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.5});

}else if (this.hitTest("#hit-test", "40%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.6});

}else if (this.hitTest("#hit-test", "30%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.7});

}else if (this.hitTest("#hit-test", "20%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.8});

}else if (this.hitTest("#hit-test", "10%")) {

TweenMax.to("#photo--missing", tt, {autoAlpha:.9});

}else{

TweenMax.to("#photo--missing", tt, {autoAlpha:1});

} 

[GreenSock 8,117 Likes (Superhero)]

Ah, okay. In that case, maybe it'd be better to just do a straight-up distance calculation. For example, you use getClientBoundingRect() on each, find the center of each (by averaging the left/right and top/bottom), then measure the distance between those two points and set the opacity accordingly. Just an idea. I think that'd be more performant and dynamic. 

 

Cheers!