force dragend when collision is detected in kineticJS

Question

How do I make the dragged shape stop being dragged (dragend action) when intersects with the borders of another shape? I already tested the collision detection. What I want for now is how to actually stop it from moving, and force the drop.

IMPORTANT EDIT: I need to manipulate group of shapes, but it seems to require another solution with groups. Any suggestions?

I actually found help on shapes, and tried to make it work with groups. Here's the fiddle http://jsfiddle.net/PFH55/12/ . I get a console error: kinetic is not defined, whereas it's defined.

another edit: I need the solution to work on draggable clones of groups in KineticJS. (What I mean here is that there's an original group in one layer, dragging it creates a clone, which can be dropped only in the second layer, on drop: do the magic of collision detection)

Answer 1

You could try to call the method stopDrag() which is available for every Node object. So once you found collision detection, call this method on the node that is being dragged.

Does this help you?

Update

I worked out working example for collision detection with squares. It can be a bit buggy when colliding with 2 objects in certain conditions, so you could improve on this. The current algorithm also assumes all objects are squares.

Here is the fiddle: http://jsfiddle.net/PFH55/19/

The doObjectsCollide function new returns an array of all objects it collided with. This is then used in the dragBoundCarre. The code belonging to the line if(collided.length > 1) can be improved to make the collision detection with two or more objects a little bit better.