jQuery UI Draggable输出提供两个不同的数字

Question

我正在进行一项需要具有缩放功能的项目。然后，用户可以在产品图片上拖动缩放。

在我的实现中，当您拖动缩放时，它会使图片闪烁。我得出结论，这是由于jQuery输出两个数字。我怎样才能解决这个问题？

这是我的代码：

imgZoom.draggable({
    drag:function(e, ui){
      var y = ui.position.top;
      var x = ui.position.left;
      //x = Math.floor(x);
      //y = Math.floor(y);
      var topZoom = parseInt(imgZoomImg.css('top'));
      var leftZoom = parseInt(imgZoomImg.css('left'));
      imgZoomImg.css({
        top:(-y*6) - topZoom,
        left:(-x*6) - leftZoom
      })
      console.log(topZoom)
    },
    containment:'.product-view-degree'
  });

这是控制台的输出：

default.js:109 -153
default.js:109 -429
default.js:109 -147
default.js:109 -423
default.js:109 -141
default.js:109 -417
default.js:109 -135
default.js:109 -411
default.js:109 -129
default.js:109 -405

编辑：我现在就把它放在jsfiddler上：http://jsfiddle.net/640pfoq0/

编辑：在朋友的帮助下，我设法重写了它：

imgZoom.draggable({
    drag:function(e, ui){
      e.stopPropagation();

      var x = parseInt(imgZoom.css('top')) + 75;
      var y = parseInt(imgZoom.css('left')) + 75;


      imgZoomImg.css({
        top:(-x*3)+75,
        left:(-y*3)+150
      })

    },
    containment:'.product-view-degree'
});