Zoom drag problem

When the container is zoomed a drag operation on the container jumps on the first muse move. Open the page, then try a drag operation. The first one usually works OK. Subsequent ones jump when tried. Repeatable on Chrome and IE9. Use 'r' to reset the zoom to 1.0 and the container drag works correctly.

by Nigel Thompson

HTML

<!-- Create an area where we will allow items to be moved -->
<div id=mycontainer>Press '+' to zoom in, '-' to zoom out, 'r' to reset.
    <br>This pane is draggable
    <!-- create a couple of boxes -->
    <div class="mybox" id="source">Draggable</div>
    <div class="mybox" id="dest">Draggable</div>
</div>

CSS

#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 */
    }

JavaScript

// 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 =...