前言

简单介绍下，项目中需要使用到jsPlumb做些什么。

1. 有三类被拖动拖入的元素：源元素、目的元素、以及转换（这个就是一个工具）。 其中源元素要求只有一个为源的锚点。目的元素的端点只能连接一个。转换，有左右两个端点，一个进一个出。类似如下图1：

以上这个是用户分别拖出DEIN、DEConverter、DEOUT到设计器中去，然后从A端点拖出连接到B，从C拖出连接到D。其中A点和C点可以拖出无限多条，B和D只能连接一条线。当用户连接好之后，点击保存按钮，下次打开软件的时候，就是上次保存的样式。基本需求就是如此，简单化了。如果想在元素上设置开关switch也可以，切换改变连接线和端点的样式。也可实现

遇到的问题与解决方法：

（1）. 初始化的端点的样式与我之前拖动生成端点（addEndpoint()）样式不一致。后来发现两者渲染端点样式使用的是不同的属性设置值。初始化，用endpoind属性值，且要添加endpointStyle: { outlineWidth: ‘’}。通过addEndpiont为元素添加的锚点是通过paintStyle去渲染锚点的。

endpoint: [ Dot ,{ radius: 2, fill: “red”, strokeStyle: “red”, fillStyle: “red”, strokeWidth: 2, outlineStroke: “red”, }], // 端点的形状, paintStyle: { radius: 3, lineWidth: 3, strokeStyle: “red”, fillStyle: “transparent”, }, // 端点的颜色样式

(2).  通过connect()方法初始化之后，发现A点要想再拖出连接其他的元素，无法拖出。后研究发现，初始化自动生成的端点未标记成拖动源和端点，所以无法进行拖出和接入。我这边的解决办法是，在connect()连接两个元素之前，使用addEndpoint()为元素添加锚点，以下以添加拖动源锚点为例：

jsPlumb.addEndpoint(sourceId, { //connectionsDetachable:false, anchors: [1, 0.5, 0, 1], },exampleGreyEndpointOptions);

其中exampleGreyEndpointOptions，为单独进行的端点样式设置参数。这里请注意！！！ 我之前在重新添加一个锚点之后依然无法拖出，最后偶然一个机会才发现，是由于，我先执行addEndpoint的方法生成锚点，然后再执行connect导致其生成的端点，覆盖了addEndpoint生成的点，所以注意代码的顺序，很重大！

（3）初始化的连接线拖动会进行位置改变：以上，通过addEndpoint生成新的拖动源锚点之后，由于，新的锚点与connect自动生成的端点在同一个位置上，所以用户在拖动的时候。总是会不小心选中连接线，（当你选中了连接线并且进行了拖动，连接线就会脱离源元素，进行位置的改变，为防止已经初始化的连接线不被拖动改变 。则，你需要添加detachable: false,参数，进行让其不被拖动。）

let intConnet = jsPlumb.connect({

source: sourceId,

target: targetId,

detachable: false, //通过jsPlumb.connect建立的连接是通过鼠标拖动端点是可分离的， 为了防止此行为设置了此属性 anchors:[“Right”, “Left”],

endpointStyle: { outlineWidth: 3}, }, config.baseStyle);

（4）使用jsPlumb.detach()删除连接线之后，拖动源元素时，锚点不随之位置变化，固定不动。实则这个问题你想清楚缘由，就好解决了。

问题的缘由是： 在你删除连接线之后，没有删除你添加的端点，导致你删除连接线之后，再进行生成端点，于是你元素上就有两个端点。如果不生成新的端点，那你目前的端点，也不是跟随元素的端点，所以导致端点与元素分离； 

解决办法： 每次生成新的端点的时候，给端点一个uuid(注意此uuid值最好是’name + guid; 这样去命名）； 然后每次执行删除连接线，或者删除目的元素这样需要重新生成端点的操作的时候；执行detach()之后，同时进行端点的删除， 然后再生成新的端点。 这样就没有问题了！

let originTargetId = info.originalTargetId; //获取之前的目的元素的guid

let tarUUid = targetUuid + originTargetId;

let ConterLeft = ConterLeft + originTargetId;

jsPlumb.deleteEndpoint(tarUUid); //在创建新的端点之前，删除此元素之前创建的端点，以免重复设置端点。 jsPlumb.deleteEndpoint(ConterLeft); //在创建新的端点之前，删除此元素之前创建的端点，以免重复设置端点。

(5)如何实时改变连接线的样式，和端点的样式 。

这个问题我整整解决了2天，之前试过许多办法都不能永久的改变其样式，后仔细看官方文档，得到用css的方法的启发，结合查找dom ，进行了调整，发现真的可以解决。

let  connect = jsPlumb.connect({source: , target: “;})

let PointsSource = $(intConnet.endpoints)[0]; //获取这条连接线的第一个锚点，源元素上的端点

let endPointsTarget = $(intConnet.endpoints)[1]; //获取这条连接线的第二个锚点，目的元素上的端点

let pathElem = $(intConnet.canvas)[0]; //获取此源和目的之间的连接线

pathElem.classList.add( foo ); //给连接线添加变灰色的样式

endPointsSource.canvas.classList.add( foo );

（6）如何设置连接线的hover改变连接线样式，并且给出类似tips的提示

使用registerConnectionType函数新注册两个连接类型，在mouseover事件发生的时候，把此类型分配给连接线（这种方式比hoverPaintStyle属性设置体验感要好许多，使用hoverPaintStyle，在拖曳新的连接线的时候，偶尔会导致已经连接的连接线处于hover状态下）； 然后编写全局监听连接线mouseover和mouseout的事件。具体代码如下：

registerConnectionType注册两个example 和 example1 两个连接类型；其中设置了连接线的样式

jsPlumb.registerConnectionType(“example”, {
paintStyle:{ strokeStyle: “green”, fillStyle: “transparent”},
});

jsPlumb.registerConnectionType(“example1”, {
paintStyle:{ strokeStyle: “#56b2f0”, fillStyle: “transparent”},
});

下面的监听事件中，addOverlay就是在hover连接线的时候增加类似tips的提示，其中location注意下，我刚开始设置的值是0.5意思是 把tips提示文本放在连接线的中间，导致在使用的时候，鼠标与文本重合的情况下，双击删除连接线无效，且有时候tips文本不出来。这是由于，tips文本层级覆盖了连接线，导致双击事件无法触发，hover事件有时候也不灵活。 我无法解决层级问题，所以只能出此下册，把文本位置挪到连接线的最前面。 码友若是有好的方法，请私信或评论告知，万分感谢！

//增加全局监听连接线mouseover和mouseout事件
function  setConnectionLabel(connection, label) {

         connection.bind(“mouseover”, function(conn) {

                 connection.setType(“example”);

                 conn.addOverlay([“Label”, { label: label, cssClass: labelcss , location: 0, id:                               “connLabel”} ]);

         });

        connection.bind(“mouseout”, function(conn) {

                 connection.setType(“example1”);
conn.removeOverlay(“connLabel”);

        });

}

然后在connect事件中调用

jsPlumb.bind( connection , function(info, originalEvent){

       setConnectionLabel(info.connection, 双击可删除连接线 );

});

有任何疑问的请留言。