StackOverFlow jsPlumb Test

by Janessa Allen

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 {
	box-shadow: 0px 0px 6px black;
}

.flowchart-demo ._jsPlumb_endpoint {
	z-index:3;
}

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 jsPlumb.Defaults.PaintStyle.  but that is what i
		// would recommend you do. Note also here that we use the 'filter' option to tell jsPlumb
		// which parts of the element should actually respond to a drag start.
		// here we test the capabilities of the library, to see if we
		// can...