kineticjs - Drag two overlapping shapes -

kineticjs - Drag two overlapping shapes -

i have 2 shapes overlapping, , want drag both when click in overlap. there easy way this?

http://jsfiddle.net/jpejf/1/

this little buggy, can spruce up, inquire for, needs more logic/polish.

the main code need @ is:

shapeslayer.on('mousedown', function(){ var userpos = stage.getuserposition(); var intersected = shapeslayer.getintersections(userpos); //gets shapes intersecting @ click position for(var = 0; < intersected.length; i++) { intersected[i].moveto(group2); // moves intersected shapes new grouping , need add together code when item moved new grouping keeps it's position } group2.simulate('dragstart'); //simulate dragging shapeslayer.draw(); }); shapeslayer.on('mouseup', function(){ //when mouse released var kids = group2.getchildren(); for(var = 0; < kids.length; i++) { kids[i].moveto(shapeslayer); //place in original container } shapeslayer.draw(); });

drag-and-drop kineticjs overlap