jsPlumb draggable element javascript function

Question

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

Answer 1

Вы пропускаете jsPlumb.setContainer($("body"));

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

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

EDIT: скрипку с вашим примером https://jsfiddle.net/mkaran/aof6mq34/