title: jquery-ui drag operation on zoomed container jumps on first mouse move
body: <p>I create a container with two small child divs. I make the container and child divs draggable. The child divs drag as expected. The outer container drags as expected when the zoom ratio is 1.0 but when zoomed in, the drag operations jump when the container is first moved. There are some other related questions and possible answers but those I've tried only fix issues with the child containers not the parent container.</p>
  
  <p>In particular, I've tried all of the suggestions here: <a href="https://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale">jQuery Drag/Resize with CSS Transform Scale</a></p>
  
  <p>And I reviewed this: <a href="https://stackoverflow.com/questions/14524944/jquery-ui-draggable-jumps-at-the-first-drag">jQuery UI Draggable jumps at the first drag</a> which has no useful answer.</p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/nigelt/w521gv0j/5/" rel="nofollow noreferrer">http://jsfiddle.net/nigelt/w521gv0j/5/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Create an area where we will allow items to be moved --&gt;
  &lt;div id=mycontainer&gt;Press '+' to zoom in, '-' to zoom out, 'r' to reset.
      &lt;br&gt;This pane is draggable
      &lt;!-- create a couple of boxes --&gt;
      &lt;div class="mybox" id="source"&gt;Draggable&lt;/div&gt;
      &lt;div class="mybox" id="dest"&gt;Draggable&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#mycontainer {
      width: 600px;
      height: 400px;
      background: #ddd;
      position: absolute;
      top: 0;
      left: 0;
      float: none;
      border: solid 1px;
  }
  .mybox {
      position: absolute;
      background: #fff;
      border: 1px solid;
      border-radius: 6px;
      width: 100px;
      height: 75px;
      float: none;
      text-align: center;
  }
  #source {
      top: 50px;
      left: 100px;
  }
  #dest {
      top: 100px;
      left: 250px;
  }
  body {
      margin: 0px;
      /* force mycontainer to edge */
      overflow: hidden;
      /* no scrolling of body area. Clip the contents if moved */
  }
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>// global to set the zoomscale
  zoomScale = 1;
  
  // Set the zoom scale
  var setZoomScale = function (zoom) {
      zoomScale = zoom;
  
      var container = $("#mycontainer");
      var scaleval = 'scale(' + zoom + ',' + zoom + ')';
      container.css('-ms-transform', scaleval);
      container.css('-webkit-transform', scaleval);
      container.css('transform', scaleval);
  }
  
  // Make the boxes draggable
  // apply the stackoverflow fix
  $("#source, #dest").draggable({
      start: function (event, ui) {
          ui.position.left = 0;
          ui.position.top = 0;
      },
      drag: function (event, ui) {
          // drag handle fix
          var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
          var newLeft = ui.originalPosition.left + changeLeft / ((zoomScale)); // adjust new left by our zoomScale
  
          var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
          var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale
  
          ui.position.left = newLeft;
          ui.position.top = newTop;
  
      }
  });
  
  // make the virtual window draggable
  // apply the stackoverflow fix
  $("#mycontainer").draggable({
      start: function (event, ui) {
          ui.position.left = 0;
          ui.position.top = 0;
      },
      drag: function (event, ui) {
          // drag handle fix
          var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
          var newLeft = ui.originalPosition.left + changeLeft / ((zoomScale)); // adjust new left by our zoomScale
  
          var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
          var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale
  
          ui.position.left = newLeft;
          ui.position.top = newTop;
      },
      stop: function (event, ui) {}
  });
  
  // add a keypress handler so we can change the zoom
  $(document).keypress(function (ev) {
      var key = String.fromCharCode(ev.charCode);
      if (key == '+') {
          setZoomScale(zoomScale *= 1.5);
      } else if (key == '-') {
          setZoomScale(zoomScale /= 1.5);
      } else if (key == 'r') {
          // reset
          setZoomScale(1.0);
          $("#mycontainer").css({
              "top": 0,
                  "left": 0
          });
      }
  });
  
  setZoomScale(1.5);
  </code></pre>
  
  <p>In the fiddle, the zoom ratio is initially set to 1.5. To reset it to 1.0, set focus to the demo window and press 'r'. After that the container drag works correctly</p>