Question

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

Answer 1

$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

jsPlumb和jQuery.PanZoom拖动问题

2 个答案: