jsplumb中对不同的锚点连接进行限制,要求为具有相同文本标签的锚点才能进行连接
时间: 2023-07-25 08:31:01 浏览: 234
可以通过jsPlumb中的`isSource`和`isTarget`方法来实现对锚点的限制。具体实现方法如下:
1. 给需要进行限制的锚点添加相同的类名,例如`.same-label`。
2. 在jsPlumb的初始化代码中,使用`isSource`和`isTarget`方法来判断连接的源和目标锚点是否具有相同的类名,如果相同则允许连接,否则不允许连接。
下面是示例代码:
```javascript
// 初始化jsPlumb
jsPlumb.ready(function() {
jsPlumb.setContainer("container");
// 判断是否是源锚点(可以拖动连接线的锚点)
jsPlumb.isSource = function(node, element) {
return $(element).hasClass('same-label');
};
// 判断是否是目标锚点(可以被连接的锚点)
jsPlumb.isTarget = function(node, element) {
return $(element).hasClass('same-label');
};
// 添加锚点
jsPlumb.addEndpoint('node1', {
anchor:"Top",
endpoint:["Dot", {radius:5}],
isSource:true, // 设置为源锚点
isTarget:true // 设置为目标锚点
});
jsPlumb.addEndpoint('node2', {
anchor:"Bottom",
endpoint:["Dot", {radius:5}],
isSource:true, // 设置为源锚点
isTarget:true // 设置为目标锚点
});
// 连接两个锚点
jsPlumb.connect({source:"node1", target:"node2"});
});
```
在上面的代码中,我们给`node1`和`node2`这两个锚点添加了相同的类名`same-label`,并且在`isSource`和`isTarget`方法中判断了锚点是否具有该类名。这样只有具有相同类名的锚点才能进行连接。
阅读全文