collision detection + mouse events in kineticjs

Question

I am trying to do a drag & drop on a number of rectangle objects that are draggable.

There is another set of rectangle objects acting as container for dropping objects - I have added them to a group.

1. How can I detect the collision between a group/or any of the box objects(stored in array) - with the draggable elements.

Everything is in a single layer.

1. Also when the draggable element is placed over the group box, it does not listen to the mouse over event (which is assigned to it) - is there a way to delegate the events(mouseover, mouseout) to the low level object when another element drags over it.

   box.on("mouseover", function(e) { console.log("mouseover");});

Thanks.

Answer 1

1. I believe that KineticJS doesn't support it's own collision detection so you would have to write your own function. These 2 SO questions are good starting points:

   Dragging collisions

   HTML5 / kineticJS getIntersection function implementation

2. Referencing the answer to this question: How to start mouseover event while dragging

   We see that we can follow similarly on KineticJS, and that the solution goes hand in hand with creating your own collision detection function. The only difference here is instead of calculating the coordinates for hit detection on divs, you can calculate the 4 corner point coordinates of each shape (in your case, a rectangle). Also, instead of writing your own drag functions, you can use getMousePos() and the events: dragstart, dragend, and mousemove to rewrite the code from the fiddle example and cater to your kinetic rectangles.