JSFiddle - React, Tailwind, and code Playground

by Dhinakar

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.1-all.js"></script>
<div id="a">
    <span>A</span>
</div>

<div id="b">
    <span>B</span>
</div>

<div id="c">
    <span>C</span>
</div>

CSS

div {
    background-color: #ccc;
    position: absolute;
    height: 4em;
    width: 4em;
    z-index:10;
}

#a {
    top: 2em;
    left: 10em;
}

#b {
    top: 8em;
    left: 20em;
}

#c {
    top: 10em;
    left: 2em;
}

JavaScript

jsPlumb.Defaults.EndpointStyle = { fillStyle: 'rgba(0,0,0,.5)' };

var a = $('#a');
var b = $('#b');
var c = $('#c');

var targetEndPointParams = {
    dynamicAnchors: [ 'TopCenter', 'RightMiddle', 'LeftMiddle' ],
    isSource: false,
    isTarget: true,
    maxConnections: 1,
    endpoint: 'Dot'
};

var sourceEndPointParams = {
    dynamicAnchors: [ 'BottomCenter', 'RightMiddle', 'LeftMiddle' ],
    isSource: true,
    isTarget: false,
    maxConnections: 30,
    endpoint: 'Dot'
};

jsPlumb.addEndpoint( a, $.extend(
    { uuid: 'a-source' },
    sourceEndPointParams
));

jsPlumb.addEndpoint( a, $.extend(
    { uuid: 'a-target' },
    targetEndPointParams 
));

jsPlumb.addEndpoint( b, $.extend(
    { uuid: 'b-target' },
    targetEndPointParams 
));

jsPlumb.addEndpoint( c, $.extend(
    { uuid: 'c-target' },
    targetEndPointParams 
));

jsPlumb.connect({ uuids: ['a-source', 'b-target'] });
jsPlumb.connect({ uuids: ['a-source', 'c-target'] });