I already implemented a solution using KineticJS of drag and drop of items: from a toolbar (or an accordion, it doesn't matter) to a white area, a stage or canvas, the items are images and rectangles. The rectangles represent a room and the images are the equipments.
In all the examples I found after googling (until now) are basically about drawing a Kinetic.Group inside of a layer, adding shapes to that group and make it draggable in the stage.
The problem here is that I don't know how to make a rectangle to be a group, so that when I drag it over the canvas, the images will be dragged as well; ie when I drag a room that contains items, the whole group is dragged and dropped. I want to implement something like this: http://jsfiddle.net/tbYLe/2/ which performs as described above.
EDIT : this is what I have done until now http://jsfiddle.net/wQ8YA/15/
First of all, you should provide code you tried, that would help others help you.
The thing you are trying to do is create a group, which is between a layer and a shape, so you add shapes to the group and then you can drag the entire group.
The attributes a group can have are listed here: http://kineticjs.com/docs/Kinetic.Group.html
And here is an example of a group: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/
notice that there is no color or shape, but it can be thought of as a rectangle, much like a layer is a rectangle, and the canvas is a rectangle. A group is just a container, not a shape
So if you want a "room," I advise this approach.
function createGroup(width,height){
//create a group - define a size for it
var group = new Kinetic.Group({
draggable: true //make group draggable
});
//create a rectangle
//add rectangle to group - fill up entire group - this will be the visual representation for your group - this rectangle should not be draggable
//return group
}
// use of
var myRoom = createGroup(100, 200);
myRoom.add(new Kinetic.Circle({config})); // this new circle can be draggable