.hitTest()

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.