KineticJS: drag a group from toolbar to stage -

i implemented solution using kineticjs of drag , drop of items: toolbar (or accordion, doesn't matter) white area, stage or canvas, items images , rectangles. rectangles represent room , images equipments.

in examples found after googling (until now) drawing kinetic.group inside of layer, adding shapes group , make draggable in stage.

the problem here don't know how make rectangle group, when drag on canvas, images dragged well; ie when drag room contains items, whole group dragged , dropped. want implement this: http://jsfiddle.net/tbyle/2/ performs described above.

edit : have done until http://jsfiddle.net/wq8ya/15/

first of all, should provide code tried, others you.

the thing trying create group, between layer , shape, add shapes group , can drag entire group.

the attributes group can have listed here: http://kineticjs.com/docs/kinetic.group.html

and here example of group: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/

notice there no color or shape, can thought of rectangle, layer rectangle, , canvas rectangle. group container, not shape

so if want "room," advise approach.

function creategroup(width,height){ //create group - define size  var group = new kinetic.group({     draggable: true //make group draggable }); //create rectangle //add rectangle group - fill entire group - visual representation group - rectangle should not draggable //return group }  // use of var myroom = creategroup(100, 200); myroom.add(new kinetic.circle({config})); // new circle can draggable