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.
You can see the behaviour in demo at http://jsfiddle.net/sandeepy02/8kGVD/12/
Step 1: Choose “create rectangle” and create rectangles.
Step 2: Choose “Move rectangle” and move the rectangles.
Step 3: Choose “create rectangle” and create rectangles. This causes the rectangles previously created to also move. This is unwanted.
<html>
<head>
<script>
function valButton(radios) {
var btn = document.getElementsByName(radios);
var cnt = -1;
for (var i = btn.length - 1; i > -1; i--) {
if (btn[i].checked) {
cnt = i;
i = -1;
}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown touchstart", function() {
var btnName = valButton("group2");
if (btnName == "1") {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect = new Kinetic.Rect({
x: 22,
y: 7,
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;
layer.drawScene();
}
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mousedown
stage.on("mousemove touchmove", function() {
var btnName = valButton("group2");
if (btnName == "1") {
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x - rect.getX());
rect.setHeight(mousePos.y - rect.getY());
moving = true;
layer.drawScene();
}
}
else if (btnName == "3") {
layer.draw();
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mousemove
stage.on("mouseup touchend", function() {
var btnName = valButton("group2");
if (btnName == "1") {
moving = false;
}
document.all.text.innerText = btnName +" "+moving;
}); //end of mouseup
};
</script>
</head>
<body>
<h2>Toggle buttons</h2>
<div class="toggle-btn-grp">
<label onclick="" class="toggle-btn"><input type="radio" value="1" name="group2"/> Create Rectangle</label>
<label onclick="" class="toggle-btn"><input type="radio" value="3" name="group2"/>Move Rectangle</label>
</div>
<div id="container" ></div>
<div id="text" >abc</div>
</body>
</html>
Here is your updated function to fix the problem –