使用Panzoom放大后如何修复不正确的jQuery可排序容器大小

Question

我正在寻找一个拖放界面，该界面允许使用jQuery Panzoom放大目标可排序对象的父容器。

这个小提琴是我的应用程序的非常原始的版本，但是它重现了我遇到的问题：

https://jsfiddle.net/SHREDDER007/67umqtfg/

如果多次单击“放大”按钮，请将目标移到可见位置，然后单击并拖动答案之一，将鼠标悬停在目标上。您会看到别名光标出现在目标的左上区域，而不是整个目标。

我相信sortable不会在缩放后更新容器的大小，并且我尝试了几种可能的解决方案（更新可排序的containmentCache，使用缩放比例调整目标大小等），但绝对没有运气。我希望这里有人能解决这个问题。

我的JavaScript代码：

$(document).ready(function() {
  $('#answerList').sortable({
    connectWith: '#destination',
    helper: "clone",
    appendTo: document.body,
    tolerance: "pointer",
    scroll: false,
    stop: function(event, ui) {
      $("body").removeClass("aliasCursor");
    },
    out: function(event, ui) {
      $('.ui-sortable-handle').removeClass('aliasCursor');
    },
    over: function(event, ui) {
      $(ui.placeholder).show();
      $('.ui-sortable-handle').addClass('aliasCursor');
    }
  });

  //Destination
  $('#destination').sortable({
    connectWith: '#answerList',
    helper: "clone",
    appendTo: document.body,
    tolerance: "pointer",
    scroll: false,
    over: function(event, ui) {

      $(ui.item).addClass("aliasCursor");
      $(ui.helper).addClass("aliasCursor");
      $("body").addClass("aliasCursor");

      $(ui.placeholder).show();
    },
    out: function(event, ui) {
      $(ui.item).removeClass("aliasCursor");
      $(ui.helper).removeClass("aliasCursor");
      $("body").removeClass("aliasCursor");

    },
    stop: function(event, ui) {
      $(ui.item).removeClass("aliasCursor");
      $(ui.helper).removeClass("aliasCursor");

      $('.ui-sortable-handle').removeClass('aliasCursor');
      $("body").removeClass("aliasCursor");
    },
    deactivate: function(event, ui) {
      $(ui.placeholder).show();
      $("body").removeClass("aliasCursor");
    }
  });

  var panzoom = $('.dragDropContainer').panzoom({
    minScale: 1
  });


  panzoom.find('input, label, .elementDragDropAnswer').on('mousedown touchstart', function(e) {
    e.stopImmediatePropagation();
  });

  $('#zoomIn').click(function() {
    panzoom.panzoom('zoom');
  });

  $('#zoomOut').click(function() {
    panzoom.panzoom('zoom', true);
  });

  $('#resetAnswers').click(function() {
    $('#destination .elementDragDropAnswer').each(function(){
        $('#answerList').append($(this));
    });
  });
});