Draggable hitTest() Multiple Elements

[Joe Hakooz 6 Likes (Newbie)]

I'm surprised I couldn't find more on this. Perhaps my lack of searching skillz ?

 

It appears that using Draggable and hitTest() only tests against a single test object. I tried using a jQuery selector (containing multiple elements) but only the first element is "tested"...

Draggable.create($('.dragElement), {
    onDrag: function () {
        // dragging
        if(this.hitTest($('.dropElements'), 10)){ // Problem. This should be testing against more than one element. 
            // over one of the drop zones
            console.log('hit'); 
        }
    }
});

And if this is possible, how can I know which element was "hit"?

 

Thanks!

[Diaco 1,948 Likes (Superhero)]

Hi Joe Hakooz 

 

you need a js loop ( for , while , ...) for that , pls check this out : 

See the Pen GFBvn by GreenSock (@GreenSock) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Yep, Diaco is exactly right. I don't think it'd be intuitive to have hitTest() accommodate multiple elements because how would you distinguish which one was hit and what if there were more than one that had an overlap? What exactly would the function return? See what I mean? Seems cleaner to just focus on one, and then if you need to test multiple, you do your own loop and use whatever logic you need. 

[Joe Hakooz 6 Likes (Newbie)]

Thanks again Diaco!

[slopps 13 Likes (Newbie)]

I would actually argue that the hitTest() function should return a percentage rather than a boolean. The percentage would represent the overlap. 0 would mean no hit detected, anything above zero would represent the percentage of overlap.

 

This would be useful when the item was touching multiple drop spots, when you want to know which drop spot the drag item was most over.

[GreenSock 8,117 Likes (Superhero)]

@slopps, I see what you mean but there are two challenges with that:

1. Most people seem to only need a boolean which is cheaper to calculate. Changing the behavior to return a percentage over overlap would mean that everyone pays that higher processing cost (seems a bit wasteful)
2. We're very reluctant to alter method signatures because it could break people's existing code. We'll do it on occasion if we feel very strongly that it's a significant upgrade and worth the potential backlash from legacy code, but I'm not sure that in this particular case it rises to that level. If we get a lot of people requesting this, we're totally willing to reconsider. 

[slopps 13 Likes (Newbie)]

You're right on both accounts. I was going to argue that it was being calculated anyway, but looking at the hitTest implementation I see that the area is only calculated if a ratio is passed.

 

Perhaps it could become a new function, getOverlapArea or some such? It goes without saying, I defer to you as this is one of the most well made libraries I've used (thank you, btw!). Not sure if percentage would be as necessary since area could also be used for comparison between the drop-zones to determine dropspot "most-over."

 

In the meantime, if anyone needs it you could get the overlap area of two elements with the following function (borrowed mostly from Draggables own hitTest implementation):

*Note: this is not as backward compatible as gsaps own hitTest code, so use at your own risk:

 

getOverlapArea = function(element1, element2)
{
  if(element1.jquery) element1 = element1[0]; //convert from jquery to dom element
  if(element2.jquery) element2 = element2[0]; //convert from jquery to dom element

  var rect1 = element1.getBoundingClientRect();
  var rect2 = element2.getBoundingClientRect();

  var xOverlap = Math.max(0, Math.min(rect1.right , rect2.right) - Math.max(rect1.left, rect2.left));
  var yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));

  return   xOverlap * yOverlap;
};

  

[GreenSock 8,117 Likes (Superhero)]

That's great, @slopps, thanks for sharing your solution. 

[erikb 28 Likes (Newbie)]

I am a little confused at the documentation here: https://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/hitTest/

 

Is the percent covered for the element being moved or for the element being moved on to?  (As the two might be very different sizes, percentage overlap could be very different).  Maybe I am misunderstanding something?

[slopps 13 Likes (Newbie)]

If you look at the docs, one of the examples says

 

//checks if at least 50% of the surface area of either element is overlapping:
if (this.hitTest("#element3", "50%")) {
//do stuff
}

 

therefore, it checks if 50% of either element is overlapping with the other

[erikb 28 Likes (Newbie)]

Thanks slopps!

[GreenSock 8,117 Likes (Superhero)]

Yep, exactly. Thanks @slopps.