Позиционирование смещено с помощью функции перетаскиваемой привязки Jquery, если элементы масштабируются

Question

Кто-нибудь использовал panzoom с функцией jquery dragggable snap? Мне нужно масштабировать родительский div (#canvas) и разрешать перетаскивать и привязывать дочерние элементы (.draggable) друг к другу. Все это работает очень хорошо, за исключением масштабирования. При масштабировании / увеличении положение привязанных элементов будет меньше нескольких пикселей.

Я пробовал css zoom, css transform (scale), но оба вызывают проблему. Изначально у меня была общая проблема с позиционированием курсора, которую другие, похоже, имели в масштабе, но мне удалось это исправить. Если кто-то сталкивался с этой проблемой или имеет идею, я ценю помощь .... или всегда приветствуется совершенно другой подход.

Вот пример Codepen, который показывает проблему при перетаскивании зеленых плиток: https://codepen.io/5kyt3k/pen/Poomead

var menuWidth = 70; //Nav bar width (set in css file)
var canvasWidth = 1900; //#Canvas width (set in css file)
var currentZoom = ((window.innerWidth - menuWidth)/canvasWidth);
var currentScale = 1;

//Auto zoom #canvas to window size on load
$(document).ready(function () {
  $('#canvas').panzoom({
    disablePan: true,
    startTransform: 'scale('+ currentZoom +')',
    increment: 0.1,
    $zoomIn: $("#zoom-in"),
    $zoomOut: $("#zoom-out"),
  });

  $('#reset').click(function () {
    $('#canvas').panzoom("zoom", currentScale); //Not Working
  });
});

function dragTiles(){
  $( ".draggable" ).draggable({
    zIndex: 100,
    snap: ".driver",
    snapTolerance: 20,

    revert : function(droppableContainer){
      if(droppableContainer) {
        //alert('valid');
      }else {
        //alert('invalid');
      }
      return(droppableContainer)
    },
    //containment: '#canvas',
    start: function(e){
      $(this).removeClass('prevent');
      var pz = $("#canvas");
      //we need current scale factor to adjust coordinates of dragging element
      currentScale = pz.panzoom("getMatrix")[0];
      $(this).css("cursor","move");
      pz.panzoom("disable");//disable panzoom to avoid double offset
    },
    drag:function(e,ui){
      //fix scale issue
      ui.position.left = ui.position.left/currentScale;
      ui.position.top = ui.position.top/currentScale;
    },
    stop: function(e,ui){
      $(this).addClass('prevent');
      $(this).css("cursor","");
      //enable panzoom back
      $("#canvas").panzoom("enable");
    }
  })
   $(".tile-content").droppable({
     accept: '.draggable',
   });
};

$( ".add" ).click(function() {
  var item = $('#name').val();
  var dsc = $('#dsc').val();
  var type = $('#type').val().toLowerCase().replace(/ /g,'-');
  if(item !== null && item !== ''){
    $('#canvas').append('<div class="draggable '+ type +' prevent" name="'+ item +'" type="'+ type +'"><div class="tile-content">' + item + '<span class="dsc">' + dsc + '</span></div></div>');
    dragTiles();
    removeTile();
  } else{
    console.log('empty');
  }
});