JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.16-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() {
        
    jsPlumb.makeSource($("#w1 .source"), {anchor:"Continuous", parent:$("#w1")});
    
    jsPlumb.makeSource($("#w2 .source"), {anchor:"LeftMiddle", parent:$("#w2")});    

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