KineticJS: cloned image, with a max clone number, disappears when dragged around the canvas

Question

I have to set a max clone number that limits cloning items. Those items are draggable. The problem will be described in this example:

• I set the max number to 2,
• I drag the two items to the drop target,
• then when I drag one of them around the canvas, the alert that says I reached the max number appears, and the item is removed (as I coded it)!

Code:

cloneImg.on('dragend', function(){ 
    if (img.maxClones>0)
    {
        img.maxClones--;
        var point = cloneImg.getPosition();
        rightLayer.draw(this);
        stage.draw();
    }        
    else {
        alert("Equipment Unavailable: max number is "+max+", and has already been reached.");
        revert(this,this.startX,this.startY);
        rightLayer.draw();
        stage.draw();
    }
}

I should add a line or two after an event, but can't seem to localize it. What do I do to prevent this from happening?

Answer 1

Maybe rework your logic to start with an appropriate stack of clones on top of the original:

A Demo: http://jsfiddle.net/m1erickson/3XSAz/

On the startup screen:

1. Create the original house (non-draggable).
2. Clone 2 copies of the original house and place them directly on top of the original. The clones would be draggable: layer.add(original.clone({draggable:true}));

On clone dragend

1. If the clone is correctly dropped inside the dropzone, leave the clone there.
2. If the clone is dropped outside the dropzone, put it back directly on top of the original.

If you want to get fancy you could make the non-draggable original at 50% opacity so the user can visually see when they have used all the available elements.

Example code:

var sw=stage.width();
var sh=stage.height();

layer.add(new Kinetic.Rect({x:sw/2,y:0,width:sw/2,height:sh,fill:"lightblue"}));

var original = new Kinetic.Circle({
    x:100,
    y:100,
    radius: 30,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    opacity:0.50,
});
original.maxClones=2;
layer.add(original);
layer.draw();
makeClones(original);

function makeClones(base){
    for(var i=0;i<original.maxClones;i++){
        var clone=base.clone({draggable:true,opacity:1.00});
        clone.startingX=clone.x();
        clone.startingY=clone.y();
        clone.on("dragend",function(){
            if(this.x()>sw/2){return;}
            this.x(this.startingX);
            this.y(this.startingY);
            layer.draw();
        });
        layer.add(clone);
    }
    layer.draw();
}