JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://localhost/programming/jsplumb-git/js/1.3.6/jquery.jsPlumb-1.3.6-all.js"></script>
<div class="workspace" id="workspace">
    <div class="window" id="serviceCommand1">DIV 1</div>
    <div class="window" id="serviceCommand2">DIV 2</div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
}

div#serviceCommand1 {
    background-color: #eee;
    left: 50px;
    top: 50px;
    z-index: 100;
}

div#serviceCommand2 {
    background-color: #eee;
    left: 200px;
    top: 200px;
    z-index: 100;
}

div.workspace{
    left: 0px;
    top: 0px;
    width: 400px;
    height: 400px;
    overflow: scroll;
    position: relative;
}

.hover {
    border:1px solid red;
}

JavaScript

jsPlumb.ready(function() {

    connectorPaintStyleOpOK = {
        lineWidth: 3, strokeStyle: "green", joinstyle: "round"
    }, sourceEndpointOpOK = {
        endpoint: "Rectangle",
        paintStyle: {
            fillStyle: "green",
            radius: 1,width: 12, height: 12
        },
        isSource: true,
        connector: ["Bezier", { curviness: 10 }],
        connectorStyle: connectorPaintStyleOpOK
    };
    
    jsPlumb.makeTarget("serviceCommand2", {
        paintStyle: { fillStyle:"red", radius:1, width:12, height:12 },
        anchor:"TopCenter",//"Continuous",        
        deleteEndpointsOnDetach:false,
        dropOptions:{hoverClass:"hover"}        
    }); 

    t1a = jsPlumb.addEndpoint("serviceCommand1", sourceEndpointOpOK, {anchor:"TopRight"});
 
    jsPlumb.bind("click", jsPlumb.detach);
    jsPlumb.draggable($(".window"));
});