Javascript jsPlumb:如何建立条件连接
我正在尝试根据规则在节点之间创建连接,例如:Javascript jsPlumb:如何建立条件连接,javascript,jquery,vue.js,jsplumb,Javascript,Jquery,Vue.js,Jsplumb,我正在尝试根据规则在节点之间创建连接,例如: “API请求”端点无法连接到除“发起调用”之外的任何其他节点 “失败”终结点无法连接到“播放音频” 等等 这是我的端点定义代码: let addEndpoints = function(toId, sourceAnchors, targetAnchors) { console.log(toId, sourceAnchors, targetAnchors); for (var i = 0; i < sourceAnchors.l
let addEndpoints = function(toId, sourceAnchors, targetAnchors) {
console.log(toId, sourceAnchors, targetAnchors);
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
instance.addEndpoint(toId, sourceEndpoint, {
anchor: sourceAnchors[i],
uuid: sourceUUID
});
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
instance.addEndpoint(toId, targetEndpoint, {
anchor: targetAnchors[j],
// anchor: 'Continuous',
uuid: targetUUID
});
}
};
let addEndpoints=函数(toId、源锚点、目标锚点){
控制台日志(toId、源锚、目标锚);
对于(var i=0;i
任何人都可以提供帮助?尝试使用
beforeDrop
拦截器:
您可以在此处看到它正在使用中(不完全是您想要如何使用它,它会在本演示中弹出一条确认信息):
尝试将一个蓝色端点拖动到另一个蓝色端点。尝试使用
beforeDrop
拦截器执行以下操作:
您可以在此处看到它正在使用中(不完全是您想要如何使用它,它会在本演示中弹出一条确认信息):
尝试将一个蓝色端点拖动到另一个蓝色端点。经过大量搜索,我找到了如何访问端点UUID,但作为 上面的答案必须在投递之前在
拦截器中调用,如下所示:
instance.bind("beforeDrop", function(info) {
...
});
if (info.connection.endpoints[0].getUuid().includes("start") &&
info.dropEndpoint.getUuid().includes("playaudio")) {
instance.deleteConnection(connInfo.connection)
} else {
init(info.connection);
}
此事件在新连接或现有连接断开时触发,因此现在info
包含我们需要访问的内容,要获取源端点,命令如下:
info.connection.endpoints[0].getUuid()
要获取目标端点,请执行以下操作:
info.dropEndpoint.getUuid()
现在,完整条件如下所示:
instance.bind("beforeDrop", function(info) {
...
});
if (info.connection.endpoints[0].getUuid().includes("start") &&
info.dropEndpoint.getUuid().includes("playaudio")) {
instance.deleteConnection(connInfo.connection)
} else {
init(info.connection);
}
在进行了大量搜索之后,我发现了如何访问端点UUID,但作为
上面的答案必须在投递之前在拦截器中调用,如下所示:
instance.bind("beforeDrop", function(info) {
...
});
if (info.connection.endpoints[0].getUuid().includes("start") &&
info.dropEndpoint.getUuid().includes("playaudio")) {
instance.deleteConnection(connInfo.connection)
} else {
init(info.connection);
}
此事件在新连接或现有连接断开时触发,因此现在info
包含我们需要访问的内容,要获取源端点,命令如下:
info.connection.endpoints[0].getUuid()
要获取目标端点,请执行以下操作:
info.dropEndpoint.getUuid()
现在,完整条件如下所示:
instance.bind("beforeDrop", function(info) {
...
});
if (info.connection.endpoints[0].getUuid().includes("start") &&
info.dropEndpoint.getUuid().includes("playaudio")) {
instance.deleteConnection(connInfo.connection)
} else {
init(info.connection);
}
感谢您的回复,在我的例子中如何实现相同的想法,正如您看到的那样,基于for循环创建的端点具有递增的值。创建端点的方式不应该对如何编写beforeDrop拦截器有很大影响。拦截器的参数包括正在拖动的连接和正在删除连接的端点。感谢您的回复,如何在我的案例中实现相同的想法,正如您看到的那样,基于for循环创建的端点的值是递增的,创建端点的方式不应该对如何编写beforeDrop拦截器有很大影响。拦截器的参数包括正在拖动的连接和正在删除该连接的端点。