Kineticjs Stop Drag To A Shape When Overlaps With Another

I have two shapes rather groups which are draggable. When the blue group is dragged it should not overlap the yellow group. heres the fiddle http://jsfiddle.net/bittu4u4ever/3Kprr/

Solution 1:

You may think getIntersections() will get you the colliding objects, I thought so too, but it's not true. It only gives intersecting CHILDREN(not all) objects of the container.

You can run collision detection logic on your rectangles and/or groups. The following link is how to detect collision on rectangles. You may apply this into your code when a rectangle is dragged.

Fast rectangle to rectangle intersection

Here is my function of how I detect collision on two rectangles with KineticJS.

var isRectCollide = function(rect1, rect2) {
    if (rect1.x - rect1.width  >= rect2.x + rect2.width  &&
        rect1.y - rect1.height >= rect2.y + rect2.height &&
        rect1.x + rect1.width  <= rect2.x + rect2.width  &&
        rect1.x + rect1.height <= rect2.y - rect2.height )
        returnfalse;
    elsereturntrue;
}

You may already know this, but in case;

1. group does not have width/height, shapes in group does.
2. shapes in group does have x/y but relative to the group.

Hope it helps