Проблема с перетаскиванием jsPlumb и jQuery.PanZoom

Я использовал плагин jquery.panzoom для масштабирования и панорамирования диаграмм jsPlumb, и все работает, но когда я масштабирую и перетаскиваю элемент, он уходит далеко от указателя! Кто-то сталкивается с той же проблемой? Может кто-то помочь мне с этим? Спасибо


javascript jsplumb
person yBarhouni    schedule 17.08.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

см. этот http://jsfiddle.net/a4v2guvt/

$panzoom.on('panzoomzoom', function (e, panzoom, scale) {
    jsPlumb.setZoom(scale);
});
person J.YL    schedule 11.03.2016
comment
Это не работает так, как должно. Если я увеличу масштаб и перетащу его на сцену, он не перейдет в нужное положение. - person johnnyghost; 04.08.2016

arrow_upward
0
arrow_downward

Чтобы исправить это, я использовал jQueryUI/draggable вместо встроенного:

var currentScale = 1;
$container.find(".diagram .item").draggable({
start: function(e){
  var pz = $container.find(".panzoom");
  //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;
  if($(this).hasClass("jsplumb-connected"))
  {
    plumb.repaint($(this).attr('id'),ui.position);
  }
},
stop: function(e,ui){
  var nodeId = $(this).attr('id');
  plumb.repaint(nodeId,ui.position);
  $(this).css("cursor","");
  //enable panzoom back
  $container.find(".panzoom").panzoom("enable");
}
});

Посмотрите на эту демонстрацию

person Yuri Gor    schedule 03.09.2016