jsPlumb和jQuery.PanZoom拖动问题

Question

我使用jquery.panzoom插件来缩放和平移jsPlumb图，所有的东西都在工作，但是当我缩放和拖动一个元素时，这个元素会远离指针！有没有人面临同样的问题？有人能帮我一下吗？谢谢

Answer 1

查看此http://jsfiddle.net/a4v2guvt/

$panzoom.on('panzoomzoom', function (e, panzoom, scale) {
    jsPlumb.setZoom(scale);
});

Answer 2

为了解决这个问题，我使用了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");
}
});

看看this demo