jQuery UI Перетаскиваемый вывод дает два разных числа

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'
});