title: How to write "drag" event for objects on canvas?
body: <p>(i correct the mousedown thing..)</p>
  
  <p>What i want to realize is to drag a ball on the canvas and then the ball will follow the mouse and change its color.</p>
  
  <p>Once the mouse releases it, its color turns back to original.</p>
  
  <p>i use "break" because only one ball could be dragged at one time.</p>
  
  <p>Now the problem is,</p>
  
  <ol>
  <li>"drag" seems weird, it seems "dragging" the first ball, but only mousemove(no mouse press) is ok right after the first ball.</li>
  <li>the color doesn't change</li>
  </ol>
  
  <p>main function below (<strong>complete code here</strong> <a href="http://jsfiddle.net/nyTkU/1/" rel="nofollow">http://jsfiddle.net/nyTkU/1/</a>):</p>
  
  <pre><code>var mousePress = false;
  var mouseEvent = function(){
  
  $(canvas).mousedown(function(e){
  
      mousePress = true;
  
      $(canvas).mousemove(function(e){
  
              for(var i=0;i&lt;figureNum;i++){
  
                  var distX=e.pageX-balls[i].x;
                  var distY=e.pageY-balls[i].y;
                  var distance = Math.sqrt((distX*distX)+(distY*distY));
  
                  if(distance&lt;=20){
                      balls[i].x=e.pageX;
                      balls[i].y=e.pageY;
                      if(mousePress){
                         balls[i].c="#F05133";
                      }
  
  
                      break;
                  }
  
                  //else{balls[i].c="#FFED79";}
  
          }
      });
  });
  
  
  $(canvas).mouseup(function(e){
  
      mousePress=false;
  
      //for(var i=0;i&lt;figureNum;i++){
  
      //  balls[i].c="#FFED79";
  
      //}
  })
  
  setTimeout(animate,speedMouse);
     }
  </code></pre>
  
  <p>Many many thanks.</p>