Raphael Scope Drag n drop multiple paper instances
- by donald
I have two Raphael paper instances. In both I want to drag and drop an element (circle). It is important for me to assign both these circles the same id. I expected no problem, as both are in different paper instances and therefore in different scope. What happens is, that somehow both elements react, when I have clicked both elements at least once. If I however give these elements different IDs everything works fine (each element only calls its "start", "drag" and "up" function if draged around).
Is this intended behaviour of Raphael and do I have to assign different IDs to the elements in the different paper instances? Hopefully not and you can point me to the right direction :-)
Thanks a lot for your Help in advance, Here comes the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>DragNDrop</title>
<script src="raphael-min.js"></script>
</head>
<body>
<h1>Paper1</h1>
<div id="divPaper1" style ="height: 150px; width: 300px; border:thin solid red"></div>
<h1>Paper2</h1>
<div id="divPaper2" style ="height: 150px; width: 300px; border:thin solid red"></div>
<script>
start1 = function () {
console.log("start1");
}
drag1 = function () {
console.log("move1");
}
up1 = function () {
console.log("up1");
}
start2 = function () {
console.log("start2");
}
drag2 = function () {
console.log("move2");
}
up2 = function () {
console.log("up2");
}
var paper1 = Raphael("divPaper1", "100%", "100%");
var circle1 = paper1.circle(40, 40, 30);
circle1.attr("fill", "yellow");
circle1.id = "circle"; //both circles get the same id
circle1.drag(drag1, start1, up1);
paper2 = Raphael("divPaper2", "100%", "100%");
var circle2 = paper2.circle(40, 40, 30);
circle2.attr("fill", "red");
circle2.id = "circle"; //both circles get the same id
circle2.drag(drag2, start2, up2);
</script>
</body>
