jsPlumb draggable element javascript函数

时间:2016-08-23 09:49:14

标签: javascript jquery css jsplumb

JSFiddle显然可以帮助您理解问题。

我希望将端点绑定到每个容器内的可拖动的元素,但只有首先绘制的端点是正确的。第二次调用绘制函数时,位置不正确并且不同步拖动。

我猜测问题在于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();
}

1 个答案:

答案 0 :(得分:3)

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

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

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

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

的小提琴