jsPlumb Demo源码分析
2015-09-02 21:53
549 查看
拖拉到中间的div层可以拖动，拖动不能超过中间div的边框：
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
使用jquery里的draggable为其标记。并指定可以拖拽的范围（局限于我们的content容器）。如果想限制元素拖拽的范围，只需要设置它的containment属性。
html 代码：
<!doctype html>
<html>
<head>
<title>jsPlumb 1.5.2 demo - jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- <link rel="stylesheet" href="../demo-all.css"> -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="main">
<div id="render"></div>
<div class="component window" id="window1"><strong>Window 1</strong></div>
<div class="component window" id="window2"><strong>Window 2</strong></div>
<div class="component window" id="window3"><strong>Window 3</strong></div>
<div class="component window" id="window4"><strong>Window 4</strong></div>
<div class="component window" id="window5"><strong>Window 5</strong></div>
<div class="component window" id="window6"><strong>Window 6</strong></div>
<div class="component window" id="window7"><strong>Window 7</strong></div>
</div>
</body>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-1.9.0-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-ui-1.9.2-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.jsPlumb-1.5.2.js'></script>
<!-- demo code -->
<script src="demo.js"></script>
</html>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
css样式：
#window1 { top:5em;left:4em;}
#window2 { top:17em; left:49em;}
#window3 { top:31em;left:4em; }
#window4 { top:9em; left:28em;}
#window5 {top:45em;left:33em;}
#window6 {top:30em;left:64em;}
#window7 {top:52em;left:6em;}
#window8 {left:66em;top:32em;}
body {
padding:0;
margin:0;
background-color:white;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color:#eaedef;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:local('Open Sans'),
local('OpenSans'),
url("OpenSans-Regular.ttf") format('truetype'),
url("OpenSans.woff") format('woff');
}
#main {
margin-top:44px;
position: relative;
font-size: 80%;
}
#render {
background-color:#fff;
}
.window{
text-align:center;
z-index:24;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}
.component:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window {
background-color:white;
border:1px solid #346789;
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:0.5em;
border-radius:0.5em;
width:5em; height:5em;
position:absolute;
color:black;
padding:0.5em;
width:8em;
height:8em;
line-height: 8em;
font-size:0.8em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.window:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window a {
font-family:helvetica;
}
._jsPlumb_drag_select * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none
}
/** Z-INDEX **/
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
z-index:23 !important;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
js代码：
jsPlumb.bind("ready", function() {
window.jsPlumbDemo = {
init : function() {
jsPlumb.importDefaults({
DragOptions : { cursor: "pointer", zIndex:2000 },
HoverClass:"connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = { strokeStyle:"#7ec3d9" }; // hover paint style is merged on normal style, so you
// don't necessarily need to specify a lineWidth
//
// connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
// window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
// and allow the endpoint styles to derive their color and outline from the connection.
// label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
// wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
// our own css classes, and the Label overlay has three css classes specified for it too. we also give this
// connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
//
var connection1 = jsPlumb.connect({
//开始点
source:"window1",
//目的点
target:"window2",
//连接器采用Bezier曲线，还有直线和流程图连线
connector:["Bezier", { curviness:70 }],
//样式
cssClass:"c1",
//端点类型，点对点（Dot Endpoint ）,矩形端点(Rectangle Endpoint).图片端点(Image Endpoint)
//blank端点类型为空
endpoint:"Blank",
endpointClass:"c1Endpoint",
//anchors锚（动态锚，静态锚）,[x,y,dx,dy];x,y的区间为[0,1]意思为锚的位置;dx,dy的区间为[-1,1]意思为曲线的方向
anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:6,
//连接器的颜色
strokeStyle:"#a7b04b",
//连接器或端点的轮廓宽度
outlineWidth:1,
//连接器或端点的颜色
outlineColor:"#666"
},
//fillStyle:定义Endpoint的颜色
endpointStyle:{ fillStyle:"#a7b04b" },
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//覆盖物类型，四个值Arrow可配置的箭头（可折回），Label点的连接器上可配置的标签，PlainArrow一个三角形的箭头，不可折回，Diamond钻石
overlays : [
//连接器上配置的label
["Label", {
cssClass:"l1 component label",
//显示的label
label : "Connection One",
//连接器的位置
location:0.7,
id:"label",
//点击事件
events:{
"click":function(label, evt) {
alert("clicked on label for connection " + label.component.id);
}
}
}],
//连接器上配置的箭头
["Arrow", {
cssClass:"l1arrow",
location:0.5, width:20,length:20,
//点击事件
events:{
"click":function(arrow, evt) {
alert("clicked on arrow for connection " + arrow.component.id);
}
}
}]
]
});
var w23Stroke = "rgb(189,11,11)";
var connection3 = jsPlumb.connect({
source:"window2",
target:"window3",
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:8,
//连接器的颜色
strokeStyle:w23Stroke,
outlineColor:"#666",
outlineWidth:1
},
detachable:false,
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
//端点类型
endpoint:"Rectangle",
endpointStyles:[
//gradient渐变，Linear线条渐变和radial半径渐变两种
{ gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
{ gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
]
});
var connection2 = jsPlumb.connect({
source:'window3', target:'window4',
//连接线的样式
paintStyle:{
lineWidth:10,
//连接器颜色
strokeStyle:connectorStrokeColor,
outlineColor:"#666",
outlineWidth:1
},
//鼠标悬浮连接器样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchor:"AutoDefault",
detachable:false,
//端点样式
endpointStyle:{
gradient : {
stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
offset:17.5,
innerRadius:15
},
//端点半径
radius:35
},
//覆盖物label显示时间
label : function(connection) {
var d = new Date();
var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
},
labelStyle:{
cssClass:"component label"
}
});
//
//this connects window5 with window6 using a Flowchart connector that is painted green,
//with large Dot endpoints that are placed in the center of each element. there is a
//label at the default location of 0.5, and the connection is marked as not being
//detachable.
//
var conn4Color = "rgba(46,164,26,0.8)";
var connection4 = jsPlumb.connect({
source:'window5',
target:'window6',
//连接器采用流程图连线，cornerRadius流程图线在折线处为圆角
connector:[ "Flowchart", { cornerRadius:10 } ],
//锚，连接器在两个window连接的位置
anchors:["Center", "Center"],
//连接线样式
paintStyle:{
lineWidth:9,
strokeStyle:conn4Color,
outlineColor:"#666",
outlineWidth:2,
joinstyle:"round"
},
//鼠标悬浮连接线样式
hoverPaintStyle:hoverPaintStyle,
detachable:false,
endpointsOnTop:false,
//端点样式
endpointStyle:{ radius:65, fillStyle:conn4Color },
labelStyle : { cssClass:"component label" },
label : "big\nendpoints"
});
var connection5 = jsPlumb.connect({
source:"window4",
target:"window5",
//锚点位置
anchors:["BottomRight", "TopLeft"],
//连接线样式
paintStyle:{
lineWidth:7,
//连接器颜色
strokeStyle:"rgb(131,8,135)",
// outlineColor:"#666",
// outlineWidth:1,
//闪烁的线
dashstyle:"4 2",
joinstyle:"miter"
},
//鼠标悬浮样式
hoverPaintStyle:hoverPaintStyle,
//端点类型为图片
endpoint:["Image", {url:"endpointTest1.png"}],
//连接器直线
connector:"Straight",
endpointsOnTop:true,
//覆盖物
overlays:[ ["Label", {
cssClass:"component label",
label : "4 - 5",
location:0.3
}],
//箭头
"Arrow"
]
});
var stateMachineConnector = {
//连接器
connector:"StateMachine",
//连接器样式
paintStyle:{lineWidth:3,strokeStyle:"#056"},
//鼠标悬浮样式
hoverPaintStyle:{strokeStyle:"#dbe300"},
//端点为空
endpoint:"Blank",
//锚位置
anchor:"Continuous",
//覆盖物，三件箭头不可折回
overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]
};
jsPlumb.connect({
source:"window3",
target:"window7"
}, stateMachineConnector);
jsPlumb.connect({
source:"window7",
target:"window3"
}, stateMachineConnector);
// jsplumb event handlers
// double click on any connection
jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
// single click on any endpoint
jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
// context menu (right click) on any component.
jsPlumb.bind("contextmenu", function(component, originalEvent) {
alert("context menu on component " + component.id);
originalEvent.preventDefault();
return false;
});
// make all .window divs draggable. note that here i am just using a convenience method - getSelector -
// that enables me to reuse this code across all three libraries. In your own usage of jsPlumb you can use
// your library's selector method - "$" for jQuery, "$$" for MooTools, "Y.all" for YUI3.
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
jsPlumb.bind("click", function(c) {
var p = $(c.canvas).find("path"),
l = p[0].getTotalLength(),
i = l, d = -10, s = 150,
att = function(a, v) {
for (var i = 0; i < p.length; i++)
p[i].setAttribute(a, v);
},
tick = function() {
if (i > 0) {
i += d;
att("stroke-dashoffset", i);
window.setTimeout(tick, s);
}
};
att("stroke-dasharray", l + " " + l);
tick();
});
}
};
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);
});
-----------------------------------------------------------------------------------------------------------
plaincopy
<!DOCTYPE html>
<html>
<head>
<script src="jsPlumb_files/jquery-1.9.0.js"></script>
<script src="jsPlumb_files/jquery-ui-1.9.2-min.js"></script>
<script src="jsPlumb_files/jquery.jsPlumb-1.4.0-all.js"></script>
<title>jsPlumb_demo</title>
<meta charset="UTF-8">
<style type="text/css">
/**当拖动一个连接点时，可连接的连接点会自动使用该css**/
.dragActive {
border: 2px dotted orange;
}
/**当拖动一个连接点到可连接的点时，该点会自动使用该css**/
.dropHover {
border: 1px dotted red;
}
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
position: absolute;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 350px;
top: 150px;
}
#state3 {
left: 100px;
top: 350px;
}
#state4 {
left: 300px;
top: 350px;
}
</style>
<script>
//初始化
jsPlumb.ready(function () {
//首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
jsPlumb.importDefaults({
DragOptions: { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制
PaintStyle: { strokeStyle: '#666' },//元素的默认颜色
EndpointStyle: { width: 20, height: 16, strokeStyle: '#567567' },//连接点的默认颜色
Endpoint: [ "Dot", { radius: 5 } ],//连接点的默认形状
Connector: [ "Bezier", { curviness: 150 } ],
Anchors: [ "TopCenter", "BottomCenter" ],//连接点的默认位置
ConnectionOverlays: [//连接覆盖图
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 1
}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
var exampleDropOptions = {
hoverClass: "dropHover",//释放时指定鼠标停留在该元素上使用的css class
activeClass: "dragActive"//可拖动到的元素使用的css class
};
// 绑定到连接/ connectionDetached事件,和更新的列表在屏幕上的连接。
jsPlumb.bind("connection", function (info, originalEvent) {
updateConnections(info.connection);
});
jsPlumb.bind("connectionDetached", function (info, originalEvent) {
updateConnections(info.connection, true);
});
function updateConnections(info) {
alert("连接线ID:" + info.id + "\n连接线sourceID:" + info.sourceId + "\n连接线targetID:" + info.targetId);
alert(info.endpoints[0].getUuid().substr(info.endpoints[0].getUuid().indexOf('-') + 1));
}
//添加jsPlumb连接点
var color1 = "#316b31";
var exampleEndpoint1 = {
endpoint: ["Dot", { radius: 5 }],//设置连接点的形状为圆形
paintStyle: { fillStyle: color1 },//设置连接点的颜色
isSource: true, //是否可以拖动（作为连线起点）
scope: "green dot",//连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color1, lineWidth: 6 },//连线颜色、粗细
connector: ["Bezier", { curviness: 10 } ],//设置连线为贝塞尔曲线
maxConnections: 1,//设置连接点最多可以连接几条线
isTarget: true, //是否可以放置（作为连线终点）
dropOptions: exampleDropOptions//设置放置相关的css
};
var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "red",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'yellow dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: 3,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
var exampleEndpoint3 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "blue",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'blue dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: -1,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
//将连接点绑定到html元素上
var anchors = [
[1, 0.2, 1, 0],
[0.8, 1, 0, 1],
[0, 0.8, -1, 0],
[0.2, 0, 0, -1]
],
maxConnectionsCallback = function (info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
};
var e1 = jsPlumb.addEndpoint("state2", { anchor: "LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上
e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数
jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上
jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上
jsPlumb.addEndpoint("state1", {anchor: anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state3", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state4", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
//设置连接线
jsPlumb.connect({
source: "state3",
target: "state2"
});
});
</script>
</head>
<body>
//html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使用jsPlumb连线必须声明id。
<div id="state1" class="item">state1</div>
<div id="state2" class="item">state2</div>
<div id="state3" class="item">state3</div>
<div id="state4" class="item">state4</div>
</body>
</html>
jsPlumb.draggable(id);
$("#" + id).draggable({ containment: "parent" });jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
使用jquery里的draggable为其标记。并指定可以拖拽的范围（局限于我们的content容器）。如果想限制元素拖拽的范围，只需要设置它的containment属性。
$(".jq-draggable-incontainer").draggable({
containment: $( "#content" ).length ? "#content" : "document"
});html 代码：
<!doctype html>
<html>
<head>
<title>jsPlumb 1.5.2 demo - jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- <link rel="stylesheet" href="../demo-all.css"> -->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="main">
<div id="render"></div>
<div class="component window" id="window1"><strong>Window 1</strong></div>
<div class="component window" id="window2"><strong>Window 2</strong></div>
<div class="component window" id="window3"><strong>Window 3</strong></div>
<div class="component window" id="window4"><strong>Window 4</strong></div>
<div class="component window" id="window5"><strong>Window 5</strong></div>
<div class="component window" id="window6"><strong>Window 6</strong></div>
<div class="component window" id="window7"><strong>Window 7</strong></div>
</div>
</body>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-1.9.0-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery-ui-1.9.2-min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='C:/Users/qiaoqiao.li/Desktop/msm/jquery.jsPlumb-1.5.2.js'></script>
<!-- demo code -->
<script src="demo.js"></script>
</html>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
css样式：
#window1 { top:5em;left:4em;}
#window2 { top:17em; left:49em;}
#window3 { top:31em;left:4em; }
#window4 { top:9em; left:28em;}
#window5 {top:45em;left:33em;}
#window6 {top:30em;left:64em;}
#window7 {top:52em;left:6em;}
#window8 {left:66em;top:32em;}
body {
padding:0;
margin:0;
background-color:white;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color:#eaedef;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:local('Open Sans'),
local('OpenSans'),
url("OpenSans-Regular.ttf") format('truetype'),
url("OpenSans.woff") format('woff');
}
#main {
margin-top:44px;
position: relative;
font-size: 80%;
}
#render {
background-color:#fff;
}
.window{
text-align:center;
z-index:24;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}
.component:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window {
background-color:white;
border:1px solid #346789;
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:0.5em;
border-radius:0.5em;
width:5em; height:5em;
position:absolute;
color:black;
padding:0.5em;
width:8em;
height:8em;
line-height: 8em;
font-size:0.8em;
-webkit-transition: -webkit-box-shadow 0.15s ease-in;
-moz-transition: -moz-box-shadow 0.15s ease-in;
-o-transition: -o-box-shadow 0.15s ease-in;
transition: box-shadow 0.15s ease-in;
}
.window:hover {
border:1px solid #123456;
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #fff;
opacity:0.9;
filter:alpha(opacity=90);
}
.window a {
font-family:helvetica;
}
._jsPlumb_drag_select * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none
}
/** Z-INDEX **/
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
z-index:23 !important;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
js代码：
jsPlumb.bind("ready", function() {
window.jsPlumbDemo = {
init : function() {
jsPlumb.importDefaults({
DragOptions : { cursor: "pointer", zIndex:2000 },
HoverClass:"connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = { strokeStyle:"#7ec3d9" }; // hover paint style is merged on normal style, so you
// don't necessarily need to specify a lineWidth
//
// connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
// window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
// and allow the endpoint styles to derive their color and outline from the connection.
// label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
// wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
// our own css classes, and the Label overlay has three css classes specified for it too. we also give this
// connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
//
var connection1 = jsPlumb.connect({
//开始点
source:"window1",
//目的点
target:"window2",
//连接器采用Bezier曲线，还有直线和流程图连线
connector:["Bezier", { curviness:70 }],
//样式
cssClass:"c1",
//端点类型，点对点（Dot Endpoint ）,矩形端点(Rectangle Endpoint).图片端点(Image Endpoint)
//blank端点类型为空
endpoint:"Blank",
endpointClass:"c1Endpoint",
//anchors锚（动态锚，静态锚）,[x,y,dx,dy];x,y的区间为[0,1]意思为锚的位置;dx,dy的区间为[-1,1]意思为曲线的方向
anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:6,
//连接器的颜色
strokeStyle:"#a7b04b",
//连接器或端点的轮廓宽度
outlineWidth:1,
//连接器或端点的颜色
outlineColor:"#666"
},
//fillStyle:定义Endpoint的颜色
endpointStyle:{ fillStyle:"#a7b04b" },
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//覆盖物类型，四个值Arrow可配置的箭头（可折回），Label点的连接器上可配置的标签，PlainArrow一个三角形的箭头，不可折回，Diamond钻石
overlays : [
//连接器上配置的label
["Label", {
cssClass:"l1 component label",
//显示的label
label : "Connection One",
//连接器的位置
location:0.7,
id:"label",
//点击事件
events:{
"click":function(label, evt) {
alert("clicked on label for connection " + label.component.id);
}
}
}],
//连接器上配置的箭头
["Arrow", {
cssClass:"l1arrow",
location:0.5, width:20,length:20,
//点击事件
events:{
"click":function(arrow, evt) {
alert("clicked on arrow for connection " + arrow.component.id);
}
}
}]
]
});
var w23Stroke = "rgb(189,11,11)";
var connection3 = jsPlumb.connect({
source:"window2",
target:"window3",
//连接线的样式
paintStyle:{
//连接线的宽度，int值
lineWidth:8,
//连接器的颜色
strokeStyle:w23Stroke,
outlineColor:"#666",
outlineWidth:1
},
detachable:false,
//连接线悬浮样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
//端点类型
endpoint:"Rectangle",
endpointStyles:[
//gradient渐变，Linear线条渐变和radial半径渐变两种
{ gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
{ gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
]
});
var connection2 = jsPlumb.connect({
source:'window3', target:'window4',
//连接线的样式
paintStyle:{
lineWidth:10,
//连接器颜色
strokeStyle:connectorStrokeColor,
outlineColor:"#666",
outlineWidth:1
},
//鼠标悬浮连接器样式
hoverPaintStyle:hoverPaintStyle,
//锚
anchor:"AutoDefault",
detachable:false,
//端点样式
endpointStyle:{
gradient : {
stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
offset:17.5,
innerRadius:15
},
//端点半径
radius:35
},
//覆盖物label显示时间
label : function(connection) {
var d = new Date();
var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
},
labelStyle:{
cssClass:"component label"
}
});
//
//this connects window5 with window6 using a Flowchart connector that is painted green,
//with large Dot endpoints that are placed in the center of each element. there is a
//label at the default location of 0.5, and the connection is marked as not being
//detachable.
//
var conn4Color = "rgba(46,164,26,0.8)";
var connection4 = jsPlumb.connect({
source:'window5',
target:'window6',
//连接器采用流程图连线，cornerRadius流程图线在折线处为圆角
connector:[ "Flowchart", { cornerRadius:10 } ],
//锚，连接器在两个window连接的位置
anchors:["Center", "Center"],
//连接线样式
paintStyle:{
lineWidth:9,
strokeStyle:conn4Color,
outlineColor:"#666",
outlineWidth:2,
joinstyle:"round"
},
//鼠标悬浮连接线样式
hoverPaintStyle:hoverPaintStyle,
detachable:false,
endpointsOnTop:false,
//端点样式
endpointStyle:{ radius:65, fillStyle:conn4Color },
labelStyle : { cssClass:"component label" },
label : "big\nendpoints"
});
var connection5 = jsPlumb.connect({
source:"window4",
target:"window5",
//锚点位置
anchors:["BottomRight", "TopLeft"],
//连接线样式
paintStyle:{
lineWidth:7,
//连接器颜色
strokeStyle:"rgb(131,8,135)",
// outlineColor:"#666",
// outlineWidth:1,
//闪烁的线
dashstyle:"4 2",
joinstyle:"miter"
},
//鼠标悬浮样式
hoverPaintStyle:hoverPaintStyle,
//端点类型为图片
endpoint:["Image", {url:"endpointTest1.png"}],
//连接器直线
connector:"Straight",
endpointsOnTop:true,
//覆盖物
overlays:[ ["Label", {
cssClass:"component label",
label : "4 - 5",
location:0.3
}],
//箭头
"Arrow"
]
});
var stateMachineConnector = {
//连接器
connector:"StateMachine",
//连接器样式
paintStyle:{lineWidth:3,strokeStyle:"#056"},
//鼠标悬浮样式
hoverPaintStyle:{strokeStyle:"#dbe300"},
//端点为空
endpoint:"Blank",
//锚位置
anchor:"Continuous",
//覆盖物，三件箭头不可折回
overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]
};
jsPlumb.connect({
source:"window3",
target:"window7"
}, stateMachineConnector);
jsPlumb.connect({
source:"window7",
target:"window3"
}, stateMachineConnector);
// jsplumb event handlers
// double click on any connection
jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
// single click on any endpoint
jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
// context menu (right click) on any component.
jsPlumb.bind("contextmenu", function(component, originalEvent) {
alert("context menu on component " + component.id);
originalEvent.preventDefault();
return false;
});
// make all .window divs draggable. note that here i am just using a convenience method - getSelector -
// that enables me to reuse this code across all three libraries. In your own usage of jsPlumb you can use
// your library's selector method - "$" for jQuery, "$$" for MooTools, "Y.all" for YUI3.
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
jsPlumb.bind("click", function(c) {
var p = $(c.canvas).find("path"),
l = p[0].getTotalLength(),
i = l, d = -10, s = 150,
att = function(a, v) {
for (var i = 0; i < p.length; i++)
p[i].setAttribute(a, v);
},
tick = function() {
if (i > 0) {
i += d;
att("stroke-dashoffset", i);
window.setTimeout(tick, s);
}
};
att("stroke-dasharray", l + " " + l);
tick();
});
}
};
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);
});
-----------------------------------------------------------------------------------------------------------
所需三个js文件：
效果图
代码：
[javascript] viewplaincopy
<!DOCTYPE html>
<html>
<head>
<script src="jsPlumb_files/jquery-1.9.0.js"></script>
<script src="jsPlumb_files/jquery-ui-1.9.2-min.js"></script>
<script src="jsPlumb_files/jquery.jsPlumb-1.4.0-all.js"></script>
<title>jsPlumb_demo</title>
<meta charset="UTF-8">
<style type="text/css">
/**当拖动一个连接点时，可连接的连接点会自动使用该css**/
.dragActive {
border: 2px dotted orange;
}
/**当拖动一个连接点到可连接的点时，该点会自动使用该css**/
.dropHover {
border: 1px dotted red;
}
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
position: absolute;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 350px;
top: 150px;
}
#state3 {
left: 100px;
top: 350px;
}
#state4 {
left: 300px;
top: 350px;
}
</style>
<script>
//初始化
jsPlumb.ready(function () {
//首先，我们给jsPlumb设一些默认值，然后声明一个exampleDropOptions变量。
jsPlumb.importDefaults({
DragOptions: { cursor: 'pointer'}, //拖动时鼠标停留在该元素上显示指针，通过css控制
PaintStyle: { strokeStyle: '#666' },//元素的默认颜色
EndpointStyle: { width: 20, height: 16, strokeStyle: '#567567' },//连接点的默认颜色
Endpoint: [ "Dot", { radius: 5 } ],//连接点的默认形状
Connector: [ "Bezier", { curviness: 150 } ],
Anchors: [ "TopCenter", "BottomCenter" ],//连接点的默认位置
ConnectionOverlays: [//连接覆盖图
["Arrow", {
location: 1,
id: "arrow",
length: 14,
foldback: 1
}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
var exampleDropOptions = {
hoverClass: "dropHover",//释放时指定鼠标停留在该元素上使用的css class
activeClass: "dragActive"//可拖动到的元素使用的css class
};
// 绑定到连接/ connectionDetached事件,和更新的列表在屏幕上的连接。
jsPlumb.bind("connection", function (info, originalEvent) {
updateConnections(info.connection);
});
jsPlumb.bind("connectionDetached", function (info, originalEvent) {
updateConnections(info.connection, true);
});
function updateConnections(info) {
alert("连接线ID:" + info.id + "\n连接线sourceID:" + info.sourceId + "\n连接线targetID:" + info.targetId);
alert(info.endpoints[0].getUuid().substr(info.endpoints[0].getUuid().indexOf('-') + 1));
}
//添加jsPlumb连接点
var color1 = "#316b31";
var exampleEndpoint1 = {
endpoint: ["Dot", { radius: 5 }],//设置连接点的形状为圆形
paintStyle: { fillStyle: color1 },//设置连接点的颜色
isSource: true, //是否可以拖动（作为连线起点）
scope: "green dot",//连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color1, lineWidth: 6 },//连线颜色、粗细
connector: ["Bezier", { curviness: 10 } ],//设置连线为贝塞尔曲线
maxConnections: 1,//设置连接点最多可以连接几条线
isTarget: true, //是否可以放置（作为连线终点）
dropOptions: exampleDropOptions//设置放置相关的css
};
var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "red",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'yellow dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: 3,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
var exampleEndpoint3 = {
endpoint: "Rectangle", //设置连接点的形状为矩形
paintStyle: {//设置连接点的大小、颜色、透明度
width: 25,
height: 21,
fillStyle: "blue",
opacity: 0.5
},
anchor: "BottomLeft", //设置连接点的位置，左下角
isSource: true, //是否可以拖动（作为连线起点）
scope: 'blue dot', //连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle: { strokeStyle: color2, lineWidth: 4},//连线颜色、粗细
//connector: "Straight", //设置连线为直线
connector: "Flowchart",//设置为流程图线
isTarget: true,//是否可以放置（作为连线终点）
maxConnections: -1,//设置连接点最多可以连接几条线 [-1为无限制]
dropOptions: exampleDropOptions,//设置放置相关的css
beforeDetach: function (conn) { //绑定一个函数，在连线前弹出确认框
return confirm("断开连接?");
},
onMaxConnections: function (info) {//绑定一个函数，当到达最大连接个数时弹出提示框
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
//将连接点绑定到html元素上
var anchors = [
[1, 0.2, 1, 0],
[0.8, 1, 0, 1],
[0, 0.8, -1, 0],
[0.2, 0, 0, -1]
],
maxConnectionsCallback = function (info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
};
var e1 = jsPlumb.addEndpoint("state2", { anchor: "LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上
e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数
jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上
jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上
jsPlumb.addEndpoint("state1", {anchor: anchors}, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state3", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
jsPlumb.addEndpoint("state4", {anchor: anchors}, exampleEndpoint3);//将exampleEndpoint2类型的点绑定到id为state1的元素上，指定活动连接点
//设置连接线
jsPlumb.connect({
source: "state3",
target: "state2"
});
});
</script>
</head>
<body>
//html部分仅声明三个div，注意，jsPlumb通过id来识别html元素，因此如果要使用jsPlumb连线必须声明id。
<div id="state1" class="item">state1</div>
<div id="state2" class="item">state2</div>
<div id="state3" class="item">state3</div>
<div id="state4" class="item">state4</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript 开发者必备的10款 Sublime Text 插件
- （JavaScript）案例一：二级联动
- JavaScript学习笔记4-闭包
- JavaScript学习笔记-JavaScript声明全局变量三种方式的异同
- bzoj1028 [JSOI2007]麻将
- JS 案例-添加节点
- JS-进阶-JS DOM常用的节点操作
- JavaScript中单引号和双引号的区别
- JSP标签库
- 关于JavaScript中没有块级作用域的理解
- JS使用DOM对元素进行添加和修改
- JavaScript简介
- $.getJSON有参数长度限制
- js注册实现
- XML 和 JSON 解析数据
- JS正则表达式的简单使用
- 读取JSON值
- 【JS/读书随笔】JavaScript编程精解/Eloquent JavaScript：Chapter 2 函数
- seajs的那些事儿
- JSON对象转字符串