true
if an overlap is sensed (according to the threshold)
GreenSock Docs (HTML5/JS)
Draggable
.hitTest()
Provides an easy way to test whether or not the target element overlaps with a particular element (or the mouse position) according to whatever threshold you [optionally] define.
Parameters
testObject: Object
the object that should be hit tested, which can be any of the following: an element, a mouse/touch event that has pageX
and pageY
properties, selector text like "#element2"
, or a generic object defining a rectangle (it should have top, left, right,
and bottom
properties).
threshold: *
(default = 0
) — Either a number defining the minimum number of pixels that must be overlapping for a positive hitTest or a string percentage (like
"50%"
) defining the minimum amount of overlapping surface area percentage for a positive hitTest. Zero (0) will check for any overlap at all.
Returns : Boolean

Details
Provides an easy way to test whether or not the target
element overlaps with a particular element (or the mouse position) according to whateverthreshold
you [optionally] define. For example:
Draggable.create("#element1", { type:"x,y", onDragEnd:function(e) { //see if the target overlaps with the element with ID "element2" if (this.hitTest("#element2")) { //do stuff } } });
By default, hitTest()
returns true if there is any overlap whatsoever, but you can optionally define a threshold
parameter to, for example, only return true if at least 20 pixels are overlapping or if 50% of the surface area of either element is overlapping with the other or whatever amount you define:
Draggable.create("#element1", { type:"x,y", onDragEnd:function(e) { //checks if at least 20 pixels are overlapping: if (this.hitTest("#element2", 20)) { //do stuff } //checks if at least 50% of the surface area of either element is overlapping: if (this.hitTest("#element3", "50%")) { //do stuff } } });
You can use hitTest(window)
to detect if an element is visible within the viewport (as of version 0.14.0).
There is also a static version of this method that allows you to pass both elements/objects to test, like Draggable.hitTest(element1, element2, 20);
(demo).
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.