JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/1.3.3/jquery.jsPlumb-1.3.3-all.js"></script>
<div class="w" id="w1">1</div>
<div class="w" id="w2">2</div>

CSS

.w { 
    width:3em; 
    height:3em; 
    position:absolute; 
    border:1px solid blue; 
    text-align:center; 
    z-index:2;
}
#w1{left:2em;top:2em;}
#w2{left:12em;top:12em;}

._jsPlumb_connector { z-index:1; }
._jsPlumb_endpoint { z-index:3; }

JavaScript

jsPlumb.ready(function() {
    
    var e = jsPlumb.addEndpoint("w1", {isSource:true, anchor:"TopLeft"}),
    e2 = jsPlumb.addEndpoint("w2", {isSource:true, isTarget:true, anchor:"TopLeft"}),
    e3 = jsPlumb.addEndpoint("w2", {isSource:true, isTarget:true, anchor:"TopRight"});
    
    e.tempId = "endpoint 1";
    e2.tempId = "endpoint 2";
    e3.tempId = "endpoint 3";    
    
    var dump = function(conn) {
        return " source was " + conn.sourceEndpoint.tempId + "; target was " + conn.targetEndpoint.tempId;
    };
    
    jsPlumb.bind("jsPlumbConnection", function(conn) {
        alert("attach: " + dump(conn)); 
    });
    
    jsPlumb.bind("jsPlumbConnectionDetached", function(conn) {
        alert("detach: " + dump(conn));
    });
    
});