JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
<div id="mask" style="">
    </div>
<div id="jsplumbContainer">
    <table >
        <tr >
            <td >
                <div id="leftdiv" style="height: 200px; overflow: auto; ">
                    Here's some longer text<br />
                    Here's some text<br />
                    Here's some text<br />
                    <span id="plumbleft">linked</span><br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                </div>
            </td>
            <td>
                <div id="rightdiv" style="height: 200px; overflow: auto">
                    Here's some longer text<br />
                    Here's some text<br />
                    Here's some text<br />
                    <span id="plumbright">linked</span><br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
                    Here's some text<br />
    ...

CSS

#jsplumbContainer { z-index:0; margin-top:100px; }
#mask { 
    z-index:10; 
height: 100px;
    position:absolute;
    width:100%;
    top:0px;
    background-color:white;
}
._jsPlumb_connector { z-index:5; }

JavaScript

jsPlumb.ready(function () {

            $('#leftdiv').scroll(function () {
                jsPlumb.repaintEverything();
            });

            $('#rightdiv').scroll(function () {
                jsPlumb.repaintEverything();
            });

            jsPlumb.importDefaults({
                Container:$("#jsplumbContainer"),
                // default drag options
                DragOptions: { cursor: 'pointer', zIndex: 2000 },
                EndpointStyles: [{ fillStyle: '#225588' }, { fillStyle: '#558822'}],
                Endpoints: [["Dot", { radius: 2}], ["Dot", { radius: 2}]]
            });
            var allSourceEndpoints = [], allTargetEndpoints = [];
            var connectorPaintStyle = {
                lineWidth: 2,
                strokeStyle: "#deea18",
                joinstyle: "round"
            },
            // .. and this is the hover style. 
            connectorHoverStyle = {
                lineWidth: 2,
                strokeStyle: "#2e2aF8"
            };
            var sourceEndpoint = {
                endpoint: "Dot",
                paintStyle: { fillStyle: "#225588", radius: 2 },
                isSource: true,
                connector: ["Straight", { stub: 40}],
                connectorStyle: connectorPaintStyle,
                hoverPaintStyle: connectorHoverStyle,
                connectorHoverStyle: connectorHoverStyle,
                dragOptions: {}
            };
            var targetEndpoint = {
                endpoint: "Dot",
                paintStyle: { fillStyle: "#558822", radius: 2 },
                hoverPaintStyle: connectorHoverStyle,
                maxConnections: -1,
                dropOptions: { hoverClass: "hover", activeClass: "active" },
                isTarget: true
            };

            _addEndpoints = function (toId, sourceAnchors, targetAnchors) {
                if (sourceAnchors)
                    for (var i = 0; i < sourceAnchors.length; i++) {
                        var...