Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable.hitTest() issue when element was rotated

Recommended Posts

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



var element1 = green;
var element2 = red;

if (Draggable.hitTest(element1, element2)) {


#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


Link to comment
Share on other sites



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.



  • Like 3
Link to comment
Share on other sites

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. 








  • Like 3
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.