JSFiddle - React, Tailwind, and code Playground

by Aras Balali Moghaddam

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://cloud.github.com/downloads/sporritt/jsPlumb/jquery.jsPlumb-1.3.16-all.js"></script>
<!doctype html>
<html>
<head>
    <title>Table Relationship Maintenance</title>    
</head>
<body>
    <div style="position:relative;margin-top:100px;">
        <div id="workarea">                                                                
            
            <div class="dbtable" id="salesorder_div">
                <h1 class="tableheader">SalesOrder</h1>                
                    <ul class="fieldlist">
                        <li class="field" id="foo1" data-field="Number">Number</li>
                        <li class="field" id="foo2" data-field="SoldTo">SoldTo</li>
                        <li class="field" id="foo3" data-field="ShipTo">ShipTo</li>
                        <li class="field" id="foo4" data-field="OrderDate">OrderDate</li>
                    </ul>
                </div>                
            </div>

            <div class="dbtable" id="salesorderline_div"> 
                <h1 class="tableheader">SalesOrderLine</h1>
                <ul class="fieldlist">
                    <li class="field" id="bar1" data-field="SalesOrderNumber">SalesOrderNumber</li>
                    <li class="field" id="bar2" dadata-field="LineNumber">LineNumber</li>
                    <li class="field" id="bar3" dadata-field="Item">Item</li>
                    <li class="field" id="bar4" dadata-field="Quantity">Quantity</li>
                    <li class="field" id="bar5" dadata-field="Price">Price</li>
                    <li class="field" id="bar6" dadata-field="Discount">Discount</li>
                    <li class="field" id="bar7" dadata-field="NetPrice">NetPrice</li>
                    <li class="field" id="bar8" dadata-field="ExtendedNetPrice">ExtendedNetPrice</li>
                </ul>               
            </div>              
         ...

CSS

.dbtable { 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:30em; height:25em;
           line-height:2em;
           text-align:left;
           z-index:20; 
           position:absolute;
           background-color:#eeeeef;
           color:black;
           font-family:helvetica;padding:0.5em;
           font-size:0.9em;}

.dbtable: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);}

._jsPlumb_connector { z-index:4;}
._jsPlumb_endpoint { z-index:21;
                     cursor:pointer; 
                     opacity:0.3;}

.fieldlist { list-style-type: none;
             overflow-y: auto; 
             height: 200px;
             padding:0; 
             margin:5px;
             font:16px sans-serif;}

.fieldlist li { padding: 5px;}

.tableheader { color: white;
               background-color: blue; 
               cursor: move;   
               margin: 0;    
               font:28px sans-serif;
               font-weight: bold;
               text-align: center;}

.field {}

#salesorder_div { top:1em;left:1em;width:20em; height:11em;}
#salesorderline_div { top:-2.5em; left:30em;width:20em; height:16em;}

JavaScript

;(function() {

    var getShadow = function(conn, parent) {
        if (!conn.shadow) {
            conn.shadow = jsPlumb.connect({
                source:conn.source,
                target:parent,
                anchors:["RightMiddle", [0,0,-1,0]] // this anchor is top left corner but pointing to the left, not up and left like TopLeft does
            });
        }            
        return conn.shadow;
    };
    
    window.jsPlumbFun = {
        init : function() {    
            
            // bind to the scroll event in the fieldlist uls
            // and repaint.
            $(".fieldlist").bind("scroll", function() {

                var p = $(this).parents(".dbtable"),
                    ult = $(this).offset().top;
                $(this).find("li").each(function(i, e) {
                  var o = $(e).offset(), h = $(e).height();                                               
                  var shouldShow = (o.top + h) > ult;                             jsPlumb.select({target:$(e).attr("id")}).each(function(c) {
                      c.endpoints[0].setVisible(shouldShow);
                        var s = getShadow(c,p);
                      s.endpoints[0].setVisible(!shouldShow);
                        jsPlumb.repaintEverything();
                    });
                });
            });
            
            
            // Important! This attaches all the elements jsPlumnb
            // creates to the workarea div. Thus allowing 
            // elements from different child divs to be connected.            
            jsPlumb.Defaults.Container = "workarea";
            jsPlumb.Defaults.PaintStyle = { strokeStyle:"gray", lineWidth:3 };
            jsPlumb.Defaults.Endpoint = ["Rectangle", { width:20, height:20 }];

            // Make all the dbtable divs draggable                                    
            jsPlumb.draggable(jsPlumb.getSelector(".dbtable"), {
               handle: '.tableheader'
            });

            //...