Make a circle draggable
<p>Hi there i have created a circle that response to a button nd it changes its position, </p>

<pre><code>var dot = paper.circle(300, 330, 5).attr({ "fill" : "black", "stroke-width" : 5, });
var drawDot = function (cy) {
  dot.animate({
    "cy" : cy
  }, 6000, "linear" );
}

var dotState = "dotYes";
buttonElem.addEventListener("click", function(ev) {

  if (dotState === "dotNo"){
    dotState = "dotYes";
    drawDot("325");}
  else {
    dotState = "dotNo"
    drawDot("195") }
});         
</code></pre>

<p>i want the circle to :
"Make the dot draggable
a. Hint: use listeners for mousedown, mouseup, and mousemove events. Create and set a “state” variable (eg ‘draggingDot’) outside of your listener callback functions in order to keep track of the mouse state between mousemove callbacks
b. Hint: listen for mousedown on the dot, but mouseup and mousemove anywhere on the div where the paper lies - this will make sure you don’t “lose” the dot if you crag your mouse too quickly.
c. In the listener for mouse moves, use an ‘if’ statement to check the state of your ‘dragging’ variable."</p>

<p>I have no idea how to update the position  of the mouse with the mousedown listener, </p>

<p>any help or clarity about wt should i do would be appreciated.</p>

<p>tkx </p>