JSFiddle - React, Tailwind, and code Playground

by gigi81

HTML

<script src="http://cloud.github.com/downloads/sporritt/jsPlumb/jquery.jsPlumb-1.3.16-all.js"></script>
    <div id="demo">
		<div class="window" id="w1">A</div>
		<div class="window" id="w2">B</div>
        
        Left endpoints are targets and right are sources.<br/>
        It should not allow you to connect element A or B to itself.
	</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}

._jsPlumb_overlay { z-index:51; }
._jsPlumb_endpoint { z-index:50; cursor:move; }
._jsPlumb_connector { z-index:1; }

.window {
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    opacity:0.8;
    filter: alpha(opacity=80);
    width:5em; height:5em;
    line-height:5em;
    text-align:center;
    z-index:20; position:absolute;
    background-color:#eeeeef;
    color:black;
    font-family:helvetica;padding:0.5em;
    font-size:0.9em;
}

.window:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity:0.6;
    filter: alpha(opacity=60);
}

.label {
    background-color:white;
}

.dropHover { border:1px solid orange; }

#w1 { top:3em;left:3em;}
#w2 { top:10em;left:22em;}

JavaScript

jsPlumb.ready(function() {
    
    var mainPaintStyle = { 
        lineWidth: 6,
        outlineColor: "#666",
        outlineWidth: 1,
        joinstyle: "round"
    };
    
    var endpointSource = {
        isSource: true,
        isTarget: false,
        dropOptions: { tolerance: "touch", hoverClass: "dropHover" }
    };
    
    var endpointTarget = {
        isTarget: true,
        isSource: false,
        dropOptions: { tolerance: "touch", hoverClass: "dropHover" }
    };
    
    jQuery(".window").each(function() {
        jsPlumb.addEndpoint(this, endpointTarget, { anchor: "LeftMiddle" });
        jsPlumb.addEndpoint(this, endpointSource, { anchor: "RightMiddle" });
    });
    
    // connect A & B
    var c = jsPlumb.connect({
        source: "w1",
        target: "w2",
        connector: "Flowchart",
        paintStyle: mainPaintStyle,
        anchors: ["RightMiddle", "LeftMiddle"]
    });
});