Draggable.hitTest() issue when element was rotated

[nep 1 Likes (Newbie)]

reference: https://greensock.com/docs/Utilities/Draggable/hitTest

 

 

var element1 = green;
var element2 = red;

if (Draggable.hitTest(element1, element2)) {
	console.log('HIT!');
}

 

#green {
  transform: rotate(45deg);
}

 

Always triggers HIT! everytime element1(green) enters the area demonstrated as "blue box" even if it doesn't hit element2(red)

 

demo: see attached image

 

Is there any possible way to fix this issue as I wanted to trigger 'HIT!' only when green touches red (given that I want to rotate this image/div),

 

Thanks in advance

[Carl 9,066 Likes (Superhero)]

Hi,

 

In the docs you referenced there is a note about this exact scenario

 

IMPORTANT: There is no way to get pixel-perfect hit testing for non-rectangular shapes in the DOM. hitTest() uses the browser's getBoundingClientRect() method to get the rectangular bounding box that surrounds the entire element, thus if you rotate an element or if it's more of a circular shape, the bounding box may extend further than the visual edges. IE8 (and earlier) is not supported because hitTest() requires element.getBoundingClientRect() which is in all modern browsers.

 

Unfortunately, that isn't something that can be easily solved at this time. However the following thread has a bunch of demos (mostly by @OSUblake) that illustrate a number of techniques that you may find interesting and worth exploring further.

 

 

[OSUblake 9,990 Likes (Superhero)]

Basically the same question was asked here. It's not that hard to integrate a collision detection library with Draggable, it just needs to be run on every on drag.