JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.14-all.js"></script>
<div style="cursor:pointer;left: 10px; top: 10px;height:30px; width:100px;position: absolute;border:solid #003333 1px;background-color:#3385ff;color:White" id="jsPlumb_1_1" >
    <div>Node 1</div>
    <div id="jsPlumb_1_2" style='border:solid 1px #003333;background-color:#ffd965; width:10px;height:10px;position:absolute;right:3px;bottom:3px;margin-left:55px;'></div>
</div>

<div style="cursor:pointer;left: 100px; top: 100px;height:30px; width:100px; position: absolute;border:solid #003333 1px;background-color:#3385ff;color:White" id="jsPlumb_2_1" >
    <div>Node 1</div>
    <div id="jsPlumb_2_2" style='border:solid 1px #003333;background-color:#ffd965; width:10px;height:10px;position:absolute;right:3px;bottom:3px;margin-left:55px;'></div>
</div>

JavaScript

function NodeEndpoint() { }
NodeEndpoint.GetNodeSourceEndpoint = function(pNode){
    return {
        isSource: true,
        parent: pNode,
        maxConnections: -1,
        anchor: "Continuous",
        endpoint: ["Dot", { radius: 2}],
        connectorStyle: { strokeStyle: "#94c275", lineWidth: 2 },
        beforeDetach: function (params) {
            return FlowDesigner.DeleteLink(params.sourceId, params.targetId, false);
        }
    };
}
NodeEndpoint.GetNodeTargetEndpoint = function(){
    return {
        isTarget: true,
        maxConnections: -1,
        anchor: "Continuous",
        endpoint: ["Dot", { radius: 6}],
        paintStyle: { fillStyle: "#ffd965", opacity: 0.1 },
        dropOptions: { hoverClass: 'dropHover' },
        beforeDrop: function (params) {
            return FlowDesigner.AddLink(params.sourceId, params.targetId, false);
        }
    };
}


jsPlumb.ready(function() {
    jsPlumb.draggable($("#jsPlumb_1_1"));  
    jsPlumb.draggable($("#jsPlumb_2_1"));

    jsPlumb.makeSource($("#jsPlumb_1_2"), NodeEndpoint.GetNodeSourceEndpoint($("#jsPlumb_1_1")));
    jsPlumb.makeTarget($("#jsPlumb_1_1"), NodeEndpoint.GetNodeTargetEndpoint());
  
    jsPlumb.makeSource($("#jsPlumb_2_2"), NodeEndpoint.GetNodeSourceEndpoint($("#jsPlumb_2_1"))); 
    jsPlumb.makeTarget($("#jsPlumb_2_1"), NodeEndpoint.GetNodeTargetEndpoint());


    var c = jsPlumb.connect({ source: $("#jsPlumb_1_1"), target: $("#jsPlumb_2_1") });

c.bind("click", function() { jsPlumb.detach(c); });

});