KineticJS: Animate an item to go back to initial position when not dropped in drop target

Question

I made an application which performs drag and drop of different items: images and shapes. I limited the drop target to a specific layer: rightLayer in my case using a simple test with if ... else. Everything works great, except that I want to make an item revert back to its original position in the leftLayer when it doesn't attempt the borders of rightLayer (just like jquery, but in kineticJS). Or just disappear instantly.

Here's a JSFIDDLE . For a better understanding, try this use case:

• drag the rectangle,
• drop it right before the grid,
• click on an item from the left layer.

Answer 1

You can self-destruct any clone dropped other than in the dropzone with a test in dragend.

A Demo: http://jsfiddle.net/m1erickson/2T68g/

clone1.on("dragend",function(){

    // destroy this clone if dropped outside the dropzone

    if(this.x()<dropzone.x()){ 
        this.destroy();
        layer.draw();
    }

});