JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/sporritt/jsPlumb/master/dist/js/jquery.jsPlumb-1.6.4.js"></script>
<div id="demo">
    <div class="window" id="w1">To ...</div>
    <div class="window" id="w2">Vancouver</div>
    <div class="window" id="w3">Seattle</div>
</div>

CSS

._jsPlumb_overlay {
    z-index:51;
}
._jsPlumb_endpoint {
    z-index:50;
    cursor:move;
}
._jsPlumb_connector {
    z-index:200;
}
.window {
    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:5em;
    height:5em;
    line-height:5em;
    text-align:center;
    z-index:20;
    position:absolute;
    background-color:#eeeeef;
    color:black;
    font-family:helvetica;
    padding:0.5em;
    font-size:0.9em;
}
.window: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);
}
.dropHover {
    border:3px solid orange;
}
#w1 {
    width: 8em;
    height: 3em;
    line-height: 3em;
    top:10em;
    left:5em;
}
#w2 {
    top:4em;
    left:20em;
    background: rgba(10, 10, 200, 0.5);
}
#w3 {
    top:15em;
    left:20em;
    background: rgba(10, 200, 10, 0.5);
}
#button {
    width: 100%;
    height:100%;
}
#button:active {
    background-color: orange;
}

JavaScript

jsPlumb.bind("jsPlumbConnection", function (info) {
    console.log("setting up connection paint binding");
    var c = info.connection,
        p = c.paint;

    c.paint = function () {
        p.apply(c, arguments);
        $(c.canvas).find("path").css("pointer-events", "visibleStroke");
    };
});

// This does not get fired
jsPlumb.bind("connectionDrag", function (info) {
    console.log("connection is being dragged: ", info);
});

jsPlumb.bind("beforeDrop", function (info) {
    console.log("connection is being dropped -> ", info);
    return true;
});

jsPlumb.bind("ready", function () {
    jsPlumb.setRenderMode(jsPlumb.SVG);

    var endpoint = {
        isSource: true,
        maxConnections: 10,
        isTarget: true,
        maxConnections: 1,
        dropOptions: {
            tolerance: "touch",
            hoverClass: function () {
                // Manualy setting the source here with $("#w1") selector. How can I dynamically obtain the source of this *potential* connection?
                $("#w1").html("To " + $("#" + this.id).html());
                return "dropHover";
            },
            parameters: {
                "sourceId": function () {
                    console.log("sourceId is:", this.id);
                    return this.id;
                }
            }
        }
    };

    jsPlumb.Defaults.DragOptions = {
        cursor: 'wait',
        zIndex: 20
    };
    jsPlumb.Defaults.Connector = ["Bezier", {
        curviness: 90
    }];

    var e1 = jsPlumb.makeSource("w1", endpoint);

    var e2 = jsPlumb.makeTarget("w2", endpoint);
    var e3 = jsPlumb.makeTarget("w3", endpoint);

    jsPlumb.draggable("w2");
    jsPlumb.draggable("w3");

});