这个是左边模型的容器，

表示中间区域容器。

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('

' + $(ui.helper).html() + '');

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连线就完成了。

以上就是本文的全部内容，希望能够帮助大家学习掌握流程图的核心技术JsPlumb。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！