JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://localhost/programming/jsplumb-git/build/1.4.0/js/jquery.jsPlumb-1.4.0-all.js"></script>
<div id="w1" class="w">
    <span>1</span>
    <div class="source"></div>
</div>
<div id="w2" class="w2">
    <span>2</span>
    <div class="source"></div>
</div>

CSS

.w, .w2 {
    position:absolute;
    width:80px;
    height:80px;
    border:1px solid red;
}

.source {
    width:10px;
    height:10px;
    background-color:blue;
}

#w2 {
    left:350px;
    top:250px;
}

JavaScript

jsPlumb.ready(function() {
    
    
    // when you move the opposite element that the one that has the 
    // fixed anchor, that fixed anchor is painted as if it belongs to
    // the element being dragged.
    
    // this is only a problem when one end is continuous and the other is not, and it doesn't manifest until there is some other continuous anchor connection on the element.
    
    
    jsPlumb.bind("click", function(c) {
        jsPlumb.detach(c);
    });
        
    jsPlumb.makeSource($("#w1 .source"), {anchor:"Continuous", parent:$("#w1")});
    //LeftMiddle
    jsPlumb.makeSource($("#w2 .source"), {anchor:"LeftMiddle", parent:$("#w2")});    

    jsPlumb.makeTarget($(".w"), {anchor:"Continuous"});     
    
    // TopCenter
    jsPlumb.makeTarget($(".w2"), {anchor:"TopCenter"});  
     
    jsPlumb.draggable($("div"));
    
    jsPlumb.connect({source:"w1",target:"w2", paintStyle:{strokeStyle:"red"}});
    jsPlumb.connect({source:"w2",target:"w1",paintStyle:{strokeStyle:"blue"}});    
});