jsplumb

by Toni

HTML

<script src="http://www.jsplumb.org/js/dom.jsPlumb-1.7.2-min.js"></script>
<link rel="stylesheet" href="http://www.jsplumb.org/css/jsplumb.css">
<link rel="stylesheet" href="http://www.jsplumb.org/demo/flowchart/demo.css">
 <div id="diagramContainer">
        <div id="item_left" class="item"></div>
        <div id="item_right" class="item" style="margin-left:50px;"></div>
    </div>
<div id="main">
            <!-- demo -->
            <div class="demo flowchart-demo" id="flowchart-demo">
                <div class="explanation">
                    <i class="fa fa-info-circle"></i>
                    <h4>FLOWCHART</h4>
                    <p>Nodes are connected with the Flowchart connector.</p>
                    <p>Hover over connections to highlight them, click to delete. </p>
                    <p>Drag new connections from hollow dots to solid dots. You can also drag connections from their source/target to other sources/targets, or back onto themselves.</p>
                    <p>By default, Flowchart connectors have square corners, but by setting the 'cornerRadius' parameter, as we have here, you can get rounded corners.</p>
                    <p>This demonstration uses jsPlumb 1.7.2.  No external libraries are required.</p>
                </div>
                <div class="window" id="flowchartWindow1"><strong>1</strong><br/><br/></div>
                <div class="window" id="flowchartWindow2"><strong>2</strong><br/><br/></div>
                <div class="window" id="flowchartWindow3"><strong>3</strong><br/><br/></div>
                <div class="window" id="flowchartWindow4"><strong>4</strong><br/><br/></div>
            </div>
            <!-- /demo -->
        </div>

CSS

#diagramContainer {
            padding: 20px;
            width:80%; height: 400px;
            border: 1px solid gray;
        }
        
        .item {
            height:80px; width: 80px;
            border: 1px solid blue;
            float: left;
        }

JavaScript

jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"item_left",
                target:"item_right",
                endpoint:"Rectangle"
            });
    var instance = jsPlumb.getInstance({
		// default drag options
		DragOptions : { cursor: 'pointer', zIndex:2000 },
		// the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
		// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
		ConnectionOverlays : [
			[ "Arrow", { location:1 } ],
			[ "Label", { 
				location:0.1,
				id:"label",
				cssClass:"aLabel"
			}]
		],
		Container:"flowchart-demo"
	});

	// this is the paint style for the connecting lines..
	var connectorPaintStyle = {
		lineWidth:4,
		strokeStyle:"#61B7CF",
		joinstyle:"round",
		outlineColor:"white",
		outlineWidth:2
	},
	// .. and this is the hover style. 
	connectorHoverStyle = {
		lineWidth:4,
		strokeStyle:"#216477",
		outlineWidth:2,
		outlineColor:"white"
	},
	endpointHoverStyle = {
		fillStyle:"#216477",
		strokeStyle:"#216477"
	},
	// the definition of source endpoints (the small blue ones)
	sourceEndpoint = {
		endpoint:"Dot",
		paintStyle:{ 
			strokeStyle:"#7AB02C",
			fillStyle:"transparent",
			radius:7,
			lineWidth:3 
		},				
		isSource:true,
		connector:[ "Flowchart", { stub:[40, 60], gap:10, cornerRadius:5, alwaysRespectStubs:true } ],								                
		connectorStyle:connectorPaintStyle,
		hoverPaintStyle:endpointHoverStyle,
		connectorHoverStyle:connectorHoverStyle,
        dragOptions:{},
        overlays:[
        	[ "Label", { 
            	location:[0.5, 1.5], 
            	label:"Drag",
            	cssClass:"endpointSourceLabel" 
            } ]
        ]
	},		
	// the definition of target endpoints (will appear when the user drags a connection) 
	targetEndpoint = {
		endpoint:"Dot",					
		paintStyle:{ fillStyle:"#7AB02C",radius:11...