title: Make Drag and Drop smoothly with jQuery
body: <p>I'm dealing with a problem in my drag and drop code. The code actually works, but i would like to do two things:</p>
  
  <ol>
  <li><p>Make the movement smoother. The effect I'm looking for is something similar to this plugin <a href="http://draggabilly.desandro.com/" rel="nofollow">http://draggabilly.desandro.com/</a> (see the first example). If you compare my code below and this one, you can see how smooth the second one is, (specially if you move it faster).</p></li>
  <li><p>Fix drag movement bug. In my code, when you move the div faster, sometimes the div stop moving around, and only resume its movements whent the mouse's cursor enters again. I tried to resolve it with this code, but it doesn't work as i'd like to.</p></li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>if (mouseX &lt; offset.left &amp;&amp; mouseX &gt; offset.left + $('.movable').width()){
      $('.movable').css("left", mouseX);
  }
  if (mouseY &lt; offset.top &amp;&amp; mouseY &gt; offset.top + $('.movable').height()){
      $('.movable').css("top", mouseY);
  }
  </code></pre>
  
  <p>And here is the fiddle with my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function endMove() {
      $(this).removeClass('movable');
  }
  function startMove() {
  var offset = $('.movable').offset();
  var mouseX = event.pageX;
  var mouseY = event.pageY;
  var posX = mouseX - offset.left;
  var posY = mouseY - offset.top;
      
      
      $('.movable').on('mousemove', function(event) {
          var thisX = event.pageX - posX,
              thisY = event.pageY - posY;
  
          $('.movable').offset({
              left: thisX,
              top: thisY
          });
          
          if(mouseX &lt; offset.left &amp;&amp; mouseX &gt; offset.left + $('.movable').width()){
              $('.movable').css("left", mouseX);
          }
          
   if(mouseY &lt; offset.top &amp;&amp; mouseY &gt; offset.top + $('.movable').height()){
              $('.movable').css("top", mouseY);
          } 
          
          event.preventDefault();
          
      });
  }
  $(document).ready(function() {
      $("#containerDiv").on('mousedown', function() {
          $(this).addClass('movable');
          startMove();
      }).on('mouseup', function() {
          $(this).removeClass('movable');
          endMove();
      });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#containerDiv {
      background:#333;
      position:absolute;
      width:200px;
      height:100px;
      cursor:move ;
      line-height:100px;
      text-align:center;
      color:#fff;
      border:#aaa 1px solid;
  }
  #containerDiv.movable {
      background:#ef0;
      color:#444;
      border:#000 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="containerDiv"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to do this two things using only jQuery (no UI, no plugins), is it possible?. Thanks in advance. </p>