详解jsPlumb这个javascript的可拖动连线库

git clone https://github.com/sporritt/jsPlumb.git[/code] 
然后打开目录statemachine里的demo.js：

首先上图：



请大家耐心的看下去，我会逐行解释

jsPlumb.ready(function () {

// setup some defaults for jsPlumb.
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", {radius: 2}], //这个是控制连线终端那个小点的半径
Connector:"StateMachine", //这个就是大类了
HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 2 },//这个是鼠标放在连线上显示的效果宽度
ConnectionOverlays: [
[ "Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 0.8 //这些都是控制箭头的形状的
} ],
[ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]//这个是鼠标拉出来的线的属性
],
Container: "canvas"
});

instance.registerConnectionType("basic", { anchor:"Continuous", connector:"StateMachine" });

window.jsp = instance;

var canvas = document.getElementById("canvas"); //获取画布
var windows = jsPlumb.getSelector(".statemachine-demo .w"); //获取所有的实体

// 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(info.connection.id);//当连接成功后，将箭头上的label改为连接ID
});

// bind a double click listener to "canvas"; add new node when this occurs.
jsPlumb.on(canvas, "dblclick", function(e) {
newNode(e.offsetX, e.offsetY); //如果双击会产生一个new实体
});

//
// initialise element as connection targets and source.
//
var initNode = function(el) {

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

instance.makeSource(el, { //设置连接的源实体，就是这一头
filter: ".ep",
anchor: "Continuous",
connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
connectionType:"basic",
extract:{
"action":"the-action"
},
maxConnections: 2,
onMaxConnections: function (info, e) {
alert("Maximum connections (" + info.maxConnections + ") reached");
}
});

instance.makeTarget(el, { //设置连接的目标，就是那一头
dropOptions: { hoverClass: "dragHover" },
anchor: "Continuous",
allowLoopback: true
});

// this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
// version of this demo to find out about new nodes being added.
//
instance.fire("jsPlumbDemoNodeAdded", el); //立即生效
};

var newNode = function(x, y) { //这个就是刚才双击调用的函数了，作用是添加一个新实体
var d = document.createElement("div");
var id = jsPlumbUtil.uuid();
d.className = "w";
d.id = id;
d.innerHTML = id.substring(0, 7) + "<div class=\"ep\"></div>";
d.style.left = x + "px";
d.style.top = y + "px";
instance.getContainer().appendChild(d);
initNode(d);
return d;
};

// suspend drawing and initialise.
instance.batch(function () { //暂停渲染，执行下面的动作
for (var i = 0; i < windows.length; i++) {
initNode(windows[i], true);
}
// and finally, make a few connections
instance.connect({ source: "opened", target: "phone1", type:"basic" }); //这都是一些初始化的设置了
instance.connect({ source: "phone1", target: "phone1", type:"basic" });
instance.connect({ source: "phone1", target: "inperson", type:"basic" });

instance.connect({
source:"phone2",
target:"rejected",
type:"basic"
});
});

jsPlumb.fire("jsPlumbDemoLoaded", instance);

});