How to fix incorrect jQuery sortable container sizing after zooming in with panzoom

36
January 09, 2019, at 04:00 AM

I'm looking to use a drag and drop interface that allows for the parent container of the destination sortable to be zoomed in on using jQuery Panzoom.

This fiddle is a very rudimentary version of my application, but it reproduces the issue I'm having:

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

If you click the "Zoom In" button a couple of times, move the destination into a viewable spot, and then click and drag one of the answers, hover over the destination. You'll see that an alias cursor appears in the top-left area of the destination, but not the whole destination.

I believe sortable isn't updating the size of the container after zooming, and I've tried several possible solutions(updating sortable containmentCache, resizing the destination using the zoom ratio, etc) with absolutely no luck. I'm hoping someone here has an idea that can fix it.

My JavaScript code:

$(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));
    });
  });
});
READ ALSO
Spring Boot with spring-boot-maven plug-in - unable to RESTART the application server after running integration tests

Spring Boot with spring-boot-maven plug-in - unable to RESTART the application server after running integration tests

I have a Spring Boot application and that application has integration tests

66
How to print in xml form an array that does not contain any HTML tags, just text?

How to print in xml form an array that does not contain any HTML tags, just text?

``I have an array that has the name of the rooms in a building categorized by floorsAnd I need to print them so they look like the pictures below

46
The requested route has not been mapped in Spark?

The requested route has not been mapped in Spark?

I have simple restfull api in Java SparkUnit test which is getting single user passes sucesfully as expected instead of failure case with non existing user

52
Have a Queue subscribed to multiple Queues, programmaticaly

Have a Queue subscribed to multiple Queues, programmaticaly

I have two Virtual Topics: T1, T2I have a consumer named FOO

73