Как исправить неправильный размер сортируемого контейнера jQuery после увеличения с помощью panzoom - PullRequest
Новая
       8

Как исправить неправильный размер сортируемого контейнера jQuery после увеличения с помощью panzoom

0 голосов
/ 08 января 2019

Я хочу использовать интерфейс перетаскивания, который позволяет увеличить масштаб родительского контейнера целевого объекта сортировки с помощью jQuery Panzoom.

Эта скрипка - очень элементарная версия моего приложения, но она воспроизводит проблему, с которой я столкнулся:

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

Если вы нажмете кнопку «Увеличить» пару раз, переместите пункт назначения в видимое место, а затем нажмите и перетащите один из ответов, наведя курсор на пункт назначения. Вы увидите, что курсор в виде псевдонима появляется в левой верхней части пункта назначения, но не во всем пункте назначения.

Я полагаю, что sorttable не обновляет размер контейнера после масштабирования, и я попробовал несколько возможных решений (обновление сортируемого containermentCache, изменение размера места назначения с использованием коэффициента масштабирования и т. Д.) Без всякой удачи. Я надеюсь, что у кого-то здесь есть идея, которая может это исправить.

Мой код 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));
    });
  });
});
...