这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。
jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。
以上是初始化jsPlumb对象的函数。
接下来获取数据，加载页面的系统和编制模块。
初始化连接锚点
//自动连线
设置一个带border的div，对象A在mousedown
的时候监听
mousemove
事件，根据鼠标的位移来设置其宽度，mouseup的时候，移除mousemove事件。
你看看基础功能是否已经实现，你只要点击 a跟3连线就行了，以後的具体逻辑和样式自己调整代码如下
<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue"
}else{
obj.style.border="1px solid red"
}
var div = document.getElementsByTagName("div")
var leftX = ""
var leftY = ""
var rightX=""
var rightY=""
for ( var i = 0i <div.lengthi++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70
leftY = $(div[i]).position().top+35
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left
rightY = $(div[i]).position().top+35
}
}
}
if(rightX!=""&&leftX!=""){
for ( var i = 0i <(rightX-leftX)/2i++) {
var newDiv = document.createElement("div")
var y = (rightY-leftY)/((rightX-leftX)/2)
$(newDiv).css("background-color", "red")
$(newDiv).css("z-index","2")
$(newDiv).css("left",(leftX+i*4))
$(newDiv).css("top",(leftY+i*y))
$(newDiv).css("height",y+"px")
$(newDiv).css("width","4px")
$(newDiv).css("position","absolute")
$("#detail").append(newDiv)
}
}
}
</script>
</head>
<body>
<div align="center" style="margin-top: 20pxmargin-left: 30%" id="detail">
<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>
<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>
</div>
</body>
</html>
