title: Drag, drop and shape rotation with Raphael JS
body: <p>I'm using RaphaelJS 2.0 to create several shapes in a div.  Each shape needs to be able to be dragged and dropped within the bounds of the div, independently.  Upon double clicking a shape, that shape needs to rotate 90 degrees.  It may then be dragged and dropped and rotated again.</p>
  
  <p>I've loaded some code onto fiddler: <a href="http://jsfiddle.net/QRZMS/" rel="nofollow">http://jsfiddle.net/QRZMS/</a>.  It's basically this:</p>
  
  <pre><code>    window.onload = function () {
  
          var angle = 0;
  
          var R = Raphael("paper", "100%", "100%"),
              shape1 = R.rect(100, 100, 100, 50).attr({ fill: "red", stroke: "none" }),
              shape2 = R.rect(200, 200, 100, 50).attr({ fill: "green", stroke: "none" }),
              shape3 = R.rect(300, 300, 100, 50).attr({ fill: "blue", stroke: "none" }),
              shape4 = R.rect(400, 400, 100, 50).attr({ fill: "black", stroke: "none" });
          var start = function () {
              this.ox = this.attr("x");
              this.oy = this.attr("y");
          },
          move = function (dx, dy) {
              this.attr({ x: this.ox + dx, y: this.oy + dy });
          },
          up = function () {
  
          };
          R.set(shape1, shape2, shape3, shape4).drag(move, start, up).dblclick(function(){
              angle -= 90;
              shape1.stop().animate({ transform: "r" + angle }, 1000, "&lt;&gt;");
          });
  
  
      }
  </code></pre>
  
  <p>The drag and drop is working and also one of the shapes rotates on double click.  However, there are two issues/questions:</p>
  
  <ol>
  <li><p>How can I attach the rotation onto each shape automatically without having to hard-code each item reference into the rotate method?  I.e. I just want to draw the shapes once, then have them all automatically exposed to the same behaviour, so they can each be dragged/dropped/rotated independently without having to explicitly apply that behaviour to each shape.</p></li>
  <li><p>After a shape has been rotated, it no longer drags correctly - as if the drag mouse movement relates to the original orientation of the shape rather than updating when the shape is rotated.  How can I get this to work correctly so that shapes can just be dragged and rotated many times, seamlessley?</p></li>
  </ol>
  
  <p>Many thanks for any pointers!</p>