Jump to content
GreenSock

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

Draggable

.hitTest()

.hitTest( testObject:Object, threshold:* ) : Boolean

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

true if an overlap is sensed (according to the threshold)

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.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×