KineticJS: make multiple clones be draggable as a Kinetic.Group

Question

How to make clones be draggable as an entire group?

I have two layers: the first contains some items (kinetic images and rectangles), and the second is the drop zone. What I want to do is:

• drop the images inside the borders of the rectangle,
• then after dropping the items for the first time, and when I click on a rectangle, all the items are dragged with that rectangle in a Kinetic.Group, so apparently I'll have to make a hit test

It's something a little bit like this http://jsfiddle.net/7BkR7/1/ but with cloning the big rectangles.. I was inspired by this example but failed to adapt it to my solution. It's really not clear for me, I need advice and help please.

Answer 1

Here's how to clone a group and all its contained nodes:

layer.add( anyContainerGroup.clone({draggable:true} );

To make your draggable container groups, do the same thing you did with the small rects

• Make your blue, green & gold stroked containers un-draggable (they are "originals")

• Make a clone of each container placed directly on top of the original (the clones are draggable)

• When a small rect is dropped in the clone container, add the small rect to that clone container

• The clone containers (including any contained small rects) can be dragged to your dropzone.