Kineticjs - When Dynamically Creating Rect, The Rect Behind It Drags By Itself

In kineticjs I am creating dynamic rectangles that are draggable. However when I create a new rectangle, the rectangle behind it automatically drags. I dont want this to happen. Yo

Solution 1:

Here is your updated function to fix the problem -

    stage.on("mousedown touchstart", function() {
    var btnName = valButton("group2");
    if (btnName == "Create") {
        if (moving) {
            moving = false;
            layer.draw();
        } else {
            var mousePos = stage.getMousePosition();
            rect = new Kinetic.Rect({
                x: 0,
                y: 0,
                width: 0,
                height: 0,
                fill: 'red',
                stroke: 'black',
                strokeWidth: 4,
                draggable: true
            });
            layer.add(rect);
            //start point and end point are the same
            rect.setX(mousePos.x);
            rect.setY(mousePos.y);
            rect.setWidth(0);
            rect.setHeight(0);
            moving = true;
            rect.on("mousemove touchmove", function() {
                var btnName = valButton("group2");
                if (btnName == "Create") {
                    this.setDraggable(false);
                }
                else if (btnName == "Move") {
                    this.setDraggable(true);
                }
                document.all.text.innerText = btnName +" rect move MovingFlag: "+moving;
            }); //end of rect mousemove
            layer.drawScene();
        }
    }
    document.all.text.innerText = btnName +" MovingFlag: "+moving;

}); //end of mousedown