JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://morrisonpitt.com/jquery.jsPlumb-1.3.4-all.js"></script>
<div id="page">
    <div id="one">ONE</div>
    <div id="two">TWO</div>
    <div id="three">THREE</div>
    <div id="four">FOUR</div>
    <div id="five">FIVE</div>
    <div id="six">SIX</div>
    <div id="seven">SEVEN</div>
</div>

CSS

#page{        
            background:#fff;
            margin:auto;
            padding: 20px;
        }
        #page div{
            background: #ccc;
            width:200px;
            height:40px;
            margin:10px;
            -webkit-transition: all .25s ease-in-out;
        }
        .over{
            z-index:1000;
        }
        ._jsPlumb_connector{
            z-index:1;
        }
        #page div.hl{
            background:#000;
            color: #fff;
        }

JavaScript

jsPlumb.bind("ready", function() {
            jsPlumb.setDraggableByDefault(false);
            jsPlumb.Defaults.Connector = [ "Bezier", { curviness:60 } ];
            jsPlumb.Defaults.Endpoint = ["Dot", {radius:1}];
            jsPlumb.Defaults.EndpointStyle = { fillStyle: "#ccc" };
            jsPlumb.Defaults.PaintStyle = { lineWidth : 1, strokeStyle : "#ccc"  };
            jsPlumb.Defaults.HoverPaintStyle = {lineWidth:2, strokeStyle:"#000",};
        //connect person of interest to all children


//connect mothers to children

$('#page div').each(function(){
        jsPlumb.connect({
            source: 'one',
            target: this.id,
            connector: ["Bezier", { curviness:60 } ],
            anchors:["RightMiddle", "RightMiddle"],
            paintStyle:{lineWidth:1, strokeStyle:"#ccc"},    
        });
    })



//have to select id and hover, because jsPlumb ids are duplicated on some elements.
//also need a way to have only one function for both source and targets.
    $("#page div").hover(
        function(){
            
            var cons = jsPlumb.getConnections({"target":this.id});
            var sources = jsPlumb.getConnections({"source":this.id});
            for(i in sources){
                cons.push(sources[i]);
            }

            console.log(cons);
    
                for (i in cons){
                    theid = "#"+cons[i].canvas.id;
                    console.log("CONNECTORID="+theid)    
                    //using only $(theid) won't work due to duplicate id bug, added class name to get around it.            
                    $(theid+'._jsPlumb_connector').css("z-index", "1000");
                    cons[i].setHover(true);
                    cons[i].source.addClass("hl");                    
                    cons[i].target.addClass("hl");
                }
            },                
        function(){
            if (!$(this).hasClass('focus')) {        
            var cons =...