JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://localhost/programming/jsplumb-git/build/1.3.9/js/jquery.jsPlumb-1.3.9-all.js"></script>
Drag box 2 around to see how the issue happens on all four faces.

<div id="w1" class="w"><div>1</div></div>
<div id="w2" class="w">2</div>

CSS

.w {
    width:3em;height:3em;border:1px solid blue;position:absolute;
}

#w1 {  left:150px; top:140px;}
#w2 {  left:190px; top:230px; }

.w div {
    background-color: red;
}

JavaScript

jsPlumb.ready(function() {

    jsPlumb.draggable($('.w'));
        
    jsPlumb.makeSource($('.w div'), {
        parent: $('#w1'),
        anchor: "Continuous",
        connectorStyle: {
            strokeStyle: "green",
            lineWidth: 5
        },
        endpoint: [ "Dot", { radius: 5 } ],
        connector: [ "Bezier", { curviness: 100 } ]
    });
    
    jsPlumb.makeTarget($('#w2'), {
         anchor: "Continuous",
         endpoint: [ "Dot", { radius: 5 } ],
         connector: [ "Bezier", { curviness: 100 } ]
    });
                       
    jsPlumb.connect({
        source:'w1',
        target:'w2'
    });
    
});