jsPlumbドラッグ可能な要素javascript関数

Question

JSFiddleは、明らかに問題を理解できるようにします。

エンドポイントをドラッグ可能な各コンテナ内の要素にバインドしたいが、最初に描画されたエンドポイントだけが正しいとします。 2回目の描画関数が呼び出されると、位置が正しくなく、ドラッグが同期されません。

問題は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

EDIT不足している：https://jsfiddle.net/mkaran/aof6mq34/