<div> <div> <a href="#plantmodel" data-toggle="collapse">工厂模型</a> <ul> </ul> <a href="#artlinemodel" data-toggle="collapse">工艺段模型</a> <ul> <li> <a href="#"> <div dbtype="DTO_TM_ART_LINE"> <label>工段</label> </div> </a> </li> <li> <a href="#"> <div dbtype="DTO_TM_ULOC"> <label>工位</label> </div> </a> </li> </ul> </div> </div> <div></div>
Js代码：
首先我们定义几个点的样式的全局变量
//基本连接线样式 var connectorPaintStyle = { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 5, lineWidth: 2 }; // 鼠标悬浮在连接线上的样式 var connectorHoverStyle = { lineWidth: 3, strokeStyle: "#216477", outlineWidth: 2, outlineColor: "white" }; var endpointHoverStyle = { fillStyle: "#216477", strokeStyle: "#216477" }; //空心圆端点样式设置 var hollowCircle = { DragOptions: { cursor: 'pointer', zIndex: 2000 }, endpoint: ["Dot", { radius: 7 }], //端点的形状 connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式 connectorHoverStyle: connectorHoverStyle, paintStyle: { strokeStyle: "#1e8151", fillStyle: "transparent", radius: 5, lineWidth: 2 }, //端点的颜色样式 //anchor: "AutoDefault", isSource: true, //是否可以拖动（作为连线起点） connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ] isTarget: true, //是否可以放置（连线终点） maxConnections: -1, // 设置连接点最多可以连接几条线 connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]] };
然后再页面初始化完成之后注册事件
$(function(){ //左边区域的draggable事件 $("#divContentLeftMenu .node").draggable({ helper: "clone", scope: "plant" }); //中间拖拽区的drop事件 $("#divCenter").droppable({ scope: "plant", drop: function (event, ui) { // 创建工厂模型到拖拽区 CreateModel(ui, $(this)); } }); }); //1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式） function CreateModel(ui, selector) { //1.1 添加html模型 var modelid = $(ui.draggable).attr("id"); i++; var id = modelid + i; var cur_css = modelid; var type = $(ui.helper).attr("dbtype"); $(selector).append('<div dbtype="' + type + '" parentid="' + $(selector).attr("id") + '" ondblclick="InitStation().DbClick(\'' + type + '\',this)" >' + $(ui.helper).html() + '</div>'); var left = parseInt(ui.offset.left - $(selector).offset().left); var top = parseInt(ui.offset.top - $(selector).offset().top); $("#" + id).css("left", left).css("top", top); //jsPlumb.setContainer($("#divCenter")); //1.2 添加连接点 jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle); jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle); jsPlumb.draggable(id); //1.3 注册实体可draggable和resizable $("#" + id).draggable({ containment: "parent", start: function () { startMove(); }, drag: function (event, ui) { MoveSelectDiv(event, ui, id); jsPlumb.repaintEverything(); }, stop: function () { jsPlumb.repaintEverything(); } }); $("#" + id).resizable({ resize: function () { jsPlumb.repaintEverything(); }, stop: function () { jsPlumb.repaintEverything(); //oInitElement.SendPropRequest("DTO_TM_PLANT", $(this)); } }); return id; };
重点来看看这一句：
jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
调用了JsPlumb里面的addEndpoint方法，第一个参数表示页面标签的id，第一个表示连线点的位置（RightMiddle、LeftMiddle、TopCenter、BottomCenter四个选项）；第三参数表示点的样式以及连线的样式。没调用依次addEndpoint方法，元素上面就会多一个连线的节点。关于hollowCircle里面各个参数的意义，可以查看api。
还有一句多个地方都看到了：
jsPlumb.repaintEverything();
看字面意思大概能知道这句是干什么的，修复所有。当在中间区域拖动元素的时候，如果不带这一句，节点不会跟着元素一起移动。加上之后节点才会跟随标签移动。至此，最基础的JsPlumb连线就完成了。