Jump to content
GreenSock

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

Draggable.hitTest() issue when element was rotated

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Capture.PNG

Link to post
Share on other sites

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.

 

 

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

×