使用 jQuery 滑块缩放图像的位置不正确

我创建了一个滑块来操作DOM中的图像。我想发生的是图像缩放，但在缩放时保持居中。我遇到的问题是我让用户能够使用 .draggable 定位图像，但在他们移动图像并尝试再次缩放图像后，它会跳跃位置。我在问题中添加了一个小提琴来表明我的意思。

但是，如果您在首次缩放后移动图像，然后在拖动图像后再次尝试缩放滑块的第一次迭代，然后正确缩放和定位。

奇怪的是，如果您缩放图像拖动，它会再次将其缩小到原始大小拖动，然后尝试正确缩放它的位置。看起来它与之前的滑块值有关。

滑块和拖动的代码：

$( "#slide1" ).slider({
            range: "min",
            min: -70,
            max: 150,
            step: 10,
            value: 0,

   slide: function( event, ui ) {
        var zv = (1+ ui.value/100); // Rotate Value
        var nx = 0;
        var ny = 0;
        nzo = calculateAspectRatioFit(iwz, ihz, iwz*(zv), ihz*(zv));
        $('#img1').width(nzo.width).height(nzo.height);
        var wd = Math.abs(iwz - nzo.width);
        var hd = Math.abs(ihz - nzo.height);

        if (zv < 1){
            nx = (ixz+(wd/2));
            ny = (iyz+(hd/2));
            $('#img1').css({'left':nx+'px','top':ny+'px'});
        } else {
            nx = (ixz-(wd/2));
            ny = (iyz-(hd/2));
            $('#img1').css({'left':nx+'px','top':ny+'px'});
        }
    }
});

$('#img1').draggable({
            drag:function(event, ui){
                var il = ui.position.left;
                var it = ui.position.top;
                var iw = $(this).width();
                var ih = $(this).height();
                $('#img1').css({'top':it+'px','left':il+'px'});
            },
            stop:function(){
                ixz = $('#img1').position().left;
                iyz = $('#img1').position().top;
            }
        });
});

所有代码都位于此处的 JSFiddle 中。