Well.. so it's the same problem that I face with Kinetic.Group. I tried several things to make this work, but always the same result: it does not work, and even worse, the basic drag and drop functionality disappears!
I already know how to do this inside one container, the difficulty comes when I try to adapt it to the drag and drop from DOM to container. After the drop, I need the images and shapes to be moved all together. That's why I created a group for each item and made it draggable.
This is the fiddle I'm changing to make the dropped elements in the canvas, be draggable as a whole group (the non-working fiddle) http://jsfiddle.net/gkefk/15/. What is wrong with this code?
PS1: this one is the main functionality of drag and drop http://jsfiddle.net/gkefk/14/ which I'm editing.
PS2: I'm a beginner, so if you find "stupidities" in that code, please report.
A simple guide how to get what you want out of this:
Get rid of jQuery and start over.
1. Create a new Stage
2. Create two layers, one taking up the left half of the Stage, the other the right half.
3. put all your objects on the left side, make them clone-able on mousedown and fire the drag event so you can place them in the other layer on mouse up.
4. if your item is a rectangle - I'm assuming this is a group which is will have children, create a new group, and a rectangle inside it, place it in the right layer on drop.
5. if your item is a house, check for mouse intersection with a rectangle, if mouse is over a rectangle, get the parent of the rectangle on drop (which will be a group), and then place the house in that group, else place in right layer freely.