title: Why is dragging with css translate jumping?
body: <p>I am trying to drag a container using transform translate but something is causing a jumpy behavior and I can't figure out what is the cause.<br>
  <strong>UPDATE:</strong> This must work on elements when their container is not always positioned at 0,0 from the document.</p>
  
  <p><a href="http://jsfiddle.net/dML5t/2/" rel="nofollow"><strong>http://jsfiddle.net/dML5t/2/</strong></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;"&gt;
      &lt;div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;"&gt;
          &lt;div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>Javascript:</p>
  
  <pre><code>obj = {startPositionX:0,startPositionY:0};
  $('#move').on("mousedown",function(){
      var move = $(this);
      obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
      obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
      $(document).on("mousemove",function(e){
          console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
          move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
      });
  });
  $(document).on("mouseup",function(){
      $(this).off("mousemove");
  });
  </code></pre>