KineticJS: group cloned items in order to drag them

Question

How can I group cloned shapes and images, so that I can drag them together? I made the cloned images to be on top of the cloned rectangles. Do I have to create new Kinetic.Group each time I drag a rectangle? Is there another alternative for makig them drag, without grouping them?

I'm using kineticJS to perform drag and drop as many cloned items as I want, from one layer to another, this is the code I wrote until now http://jsfiddle.net/GLFxF/34/ I don't know how I should do this.

Answer 1

Kinetic.Groups are the best method to drag a set of shapes/images.

A Demo: http://jsfiddle.net/m1erickson/7BkR7/

When you drag+drop one of your cloned items, you can use clone.on("dragend" to have the cloned item join whichever group (rectangle) that it was dropped into.

Assume all your rectangle containers have been added to a containers[] array.

Then you can use this dragend function to have the clone moveTo any container its dropped into:

clone.on("dragend",function(){
    var pos=this.getAbsolutePosition();
    var x=pos.x;
    var y=pos.y;
    var hit=-1;
    for(var i=0;i<containers.length;i++){
        var c=containers[i];
        var cx=c.x();
        var cy=c.y();
        if(x>=cx && x<=cx+c.width() && y>=cy && y<=cy+c.height()){
            hit=i;
        }
    }
    if(hit>=0){
        var container=containers[hit];
        this.x(x-container.x());
        this.y(y-container.y());
        this.moveTo(container);
    }else{
        this.x(x);
        this.y(y);
        this.moveTo(layer);
    }
});