jsPlumb可拖动元素javascript函数答案

【问题标题】：jsPlumb draggable element javascript functionjsPlumb可拖动元素javascript函数
【发布时间】：2016-08-23 09:49:14
【问题描述】：

JSFiddle 将清楚地让您了解问题。

我希望端点绑定到每个容器内的元素，这些元素是可拖动的，但只有首先绘制的端点是正确的。第二次调用draw函数，位置不对，拖拽不同步。

我猜测问题出在 CSS 位置，但我找不到。

jsPlumb.ready(function() {
  $(".scroll-box").draggable({
    drag: function() {
      jsPlumb.repaintEverything();
      //jsPlumb.repaint($(this)); 

    }
  });
  //            jsPlumb.draggable($(".scroll-box"));


  drawEndPoints("in-leaf", "Right");
  drawEndPoints("out-leaf", "Left");



});

function drawEndPoints(classname, endpointposition) {

  var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Dot", {
      radius: 10
    }],
    style: {
      fillStyle: 'blue'

    },
    maxConnections: -1,
    connector: "Straight",
    connectorStyle: {
      lineWidth: 2,
      strokeStyle: 'black'
    },
    scope: "blackline",
    dropOptions: {
      drop: function(e, ui) {
        alert('drop!');
      }
    }
  };

  jsPlumb.addEndpoint($("." + classname), {
    anchor: endpointposition
  }, endpointOptions);
  //jsPlumb.repaintEverything();
}

【问题讨论】：

标签： javascript jquery css jsplumb

【解决方案1】：

你错过了jsPlumb.setContainer($("body"));

https://jsfiddle.net/mkaran/mLthybzo/

https://jsplumbtoolkit.com/community/doc/home

编辑：摆弄你的例子https://jsfiddle.net/mkaran/aof6mq34/

【讨论】：

拯救了这一天！我是 jsPlumb 的新手。我还缺少其他重要的方面吗？ @mkaran
很高兴我能帮上忙 :)。嗯，我现在不记得有什么需要注意的了，看看basic set up，另外，最好设置一个 on window resize --> jsPlumb.repaint() 事件，这样 jsplumb 就能很好地响应窗口的变化。最重要但不是最后一点，如果您有很多连接器，请利用 jsPlumb.setSuspendDrawing(true);。祝你好运！ :)