KineticJS: drag a group from toolbar to stage

Question

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/

Can you please provide the jsfiddle link of the final answer that you wanted to achieve if it's not too much trouble?? — Lucy
In the end, I gave up on the DOM element and implemented the solution with pure KineticJS + Javascript (it was a reaaally bad idea). I'll try to find the jsfiddle of the solution. — Sahar Ch.

SoluableNonagon SoluableNonagon · Accepted Answer · 2014-03-24T16:14:26

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

KineticJS: drag a group from toolbar to stage

1 Answers