jsPlumb 可拖动元素 javascript 函数

Question

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();
}

Answer 1

您缺少 jsPlumb.setContainer($("body"));

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

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

编辑：fiddle 以您的示例 https://jsfiddle.net/mkaran/aof6mq34/

jsPlumb 可拖动元素 javascript 函数

jsPlumb draggable element javascript function

javascript

css

jquery

jsplumb