StackOverFlow jsPlumb Test

HTML

<script src="https://jsplumbtoolkit.com/js/jquery.jsPlumb-1.6.4-min.js"></script>
<div class="flowchart-demo" id="tree">
    <div class="w level0"><span class="beneficiary">Name 1</span><span class="ep"></span>
    </div>
    <div class="w level1" style="top: 100px;"><span class="beneficiary">Name 2</span><span class="ep"></span>
    </div>
    <div class="w level2" style="top: 200px;"><span class="beneficiary">Name 3</span><span class="ep"></span>
    </div>
</div> <a href="#" id="save">Save</a>

CSS

#tree {
    height: 400px;
    position:relative;
}
.flowchart-demo .w {
    padding:16px;
    position:absolute;
    border: 1px solid black;
    z-index:4;
    border-radius:1em;
    border:1px solid #2e6f9a;
    box-shadow: 2px 2px 19px #e0e0e0;
    -o-box-shadow: 2px 2px 19px #e0e0e0;
    -webkit-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-border-radius:8px;
    border-radius:8px;
    opacity:0.8;
    filter:alpha(opacity=80);
    cursor:move;
    background-color:white;
    font-size:11px;
    -webkit-transition:background-color 0.25s ease-in;
    -moz-transition:background-color 0.25s ease-in;
    transition:background-color 0.25s ease-in;
}
.flowchart-demo .w:hover {
    background-color: #5c96bc;
    color:white;
}
.flowchart-demo div.break {
    width: 100%;
    display: block;
    float: left;
    /*height: 30px;*/
    text-align: center;
    position: relative;
}
.flowchart-demo .active {
    border:1px dotted green;
}
.flowchart-demo .hover {
    border:1px dotted red;
}
.flowchart-demo ._jsPlumb_connector {
    z-index:4;
}
.flowchart-demo ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel {
    z-index:21;
    cursor:pointer;
}
.aLabel {
    -webkit-transition:background-color 0.25s ease-in;
    -moz-transition:background-color 0.25s ease-in;
    transition:background-color 0.25s ease-in;
}
.aLabel._jsPlumb_hover, ._jsPlumb_source_hover, ._jsPlumb_target_hover {
    background-color:#1e8151;
    color:white;
}
.aLabel {
    background-color:white;
    opacity:0.8;
    padding:0.3em;
    border-radius:0.5em;
    border:1px solid #346789;
    cursor:pointer;
}
.ep {
    position:absolute;
    bottom: 37%;
    right: 5px;
    width:1em;
    height:1em;
    background-color:orange;
    cursor:pointer;
    box-shadow: 0px 0px 2px black;
    -webkit-transition:-webkit-box-shadow 0.25s ease-in;
    -moz-transition:-moz-box-shadow 0.25s ease-in;
    transition:box-shadow 0.25s ease-in;
}
.ep:hover {
   ...

JavaScript

jsPlumb.ready(function () {
    // setup some defaults for jsPlumb.
    var instance = jsPlumb.getInstance({
        Endpoint: ["Dot", {
            radius: 2
        }],
        HoverPaintStyle: {
            strokeStyle: "#1e8151",
            lineWidth: 2
        },
        ConnectionOverlays: [
            ["Arrow", {
                location: 1,
                id: "arrow",
                length: 14,
                foldback: 0.8
            }],
            ["Label", {
                label: "Connect To",
                id: "label",
                cssClass: "aLabel"
            }]
        ],
        Container: "tree"
    });

    var windows = jsPlumb.getSelector(".flowchart-demo .w");

    // initialise draggable elements.
    instance.draggable(windows);

    // bind a click listener to each connection; the connection is deleted. you could of course
    // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
    // happening.
    instance.bind("click", function (c) {
        instance.detach(c);
    });

    // bind a connection listener. note that the parameter passed to this function contains more than
    // just the new connection - see the documentation for a full list of what is included in 'info'.
    // this listener sets the connection's internal
    // id as the label overlay's text.
    instance.bind("connection", function (info) {
        info.connection.getOverlay("label").setLabel("");
    });


    // suspend drawing and initialise.
    instance.doWhileSuspended(function () {
        var isFilterSupported = instance.isDragFilterSupported();
        // make each ".ep" div a source and give it some parameters to work with.  here we tell it
        // to use a Continuous anchor and the StateMachine connectors, and also we give it the
        // connector's paint style.  note that in this demo the strokeStyle is dynamically generated,
        // which prevents us from just setting a...