title: Making paths and images draggable in Raphael js
body: <p>Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js?</p>
  
  <p>I want to add in paths and images which you can then move around but its proving tricky.
  I would like to work this out with Raphael because of its support with touch interfaces.</p>
  
  <p>Here is the code</p>
  
  <pre><code>&lt;script&gt;
      window.onload = function () {
          var R = Raphael(0, 0, "100%", "100%"),
              r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
              g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}),
              b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}),
              p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z") .attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5});
          var start = function () {
              this.ox = this.attr("cx");
              this.oy = this.attr("cy");
              this.animate({r: 70, opacity: .25}, 500, "&gt;");
          },
          move = function (dx, dy) {
              this.attr({cx: this.ox + dx, cy: this.oy + dy});
          },
          up = function () {
              this.animate({r: 50, opacity: .5}, 500, "&gt;");
          };
          R.set(r, g, b, p).drag(move, start, up);
      };
  &lt;/script&gt;
  </code></pre>