title: Animate element by dragging another element
body: <p>Here's a scenario: I'm trying to implement a joystick using jquery draggable() and base on the y-coordinate of my joystick, i'll move a div to the left or right (if y is positive, move to right; else if y is negative, move to left). I have already done this part but my problem is when to stop the animation.</p>
  
  <p>example;</p>
  
  <ol>
  <li><p>if i drag the joystick upward/downward and hold, the div should not stop moving. it should only stop when i release the joystick. how can i achieve this? i had tried adding this:</p>
  
  <p><code>stop: function(){ $(div).stop() } //should stop animation</code></p></li>
  <li><p>and how do i stop the queueing of events?</p></li>
  </ol>
  
  <p>any suggestions? or someone who could point where i went wrong? thanks.</p>
  
  <p>i created a fiddle here : <a href="http://jsfiddle.net/j3toxicat3d/cKd8k/2/" rel="nofollow">http://jsfiddle.net/j3toxicat3d/cKd8k/2/</a></p>