title: Drag and drop in RaphaelJS
body: <p>I have the following fiddle:
  <a href="http://jsfiddle.net/zugzq7vv/" rel="nofollow">http://jsfiddle.net/zugzq7vv/</a></p>
  
  <p>What I want to do is to be able to drag the number 1 on the left of the input box to the center of the square and make the square change to black and the number white.</p>
  
  <p>How can this be accomplished with RaphaelJS 2.1?</p>
  
  <p>JS code:</p>
  
  <pre><code>// Creates canvas 320 × 200 at 10, 50
  var paper = Raphael(document.getElementById("papercanvas"), 320, 200);
  
  var circle = paper.rect(50, 40, 50, 50);
  // Sets the fill attribute of the circle to red (#f00)
  circle.attr("fill", "#f00");
  
  // Sets the stroke attribute of the circle to white
  circle.attr("stroke", "#fff");
  
  var t = paper.text(75, 65,""); //I want this empty string to be a text I drag
  </code></pre>
  
  <p>And the simple HTML:</p>
  
  <pre><code>1&lt;input id="teste" disabled&gt;&lt;/input&gt;
  &lt;div id="papercanvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I know the interface to drag and drop, I just can't seem to be able to apply it to individual numbers.</p>