Question

这是我的要求。将有可以使用jsplumb连接的btns。当最后一个连接被赋予END按钮时，用户不应该有任何选项来编辑/更改/删除他建立的连接。这该怎么做？我试过这个：$('#target_div_id,.jsplumb-connector,.jsplumb-endpoint,.jsplumb-overlay').addClass('readonly_div');

.readonly_div{
opacity:0.5;
pointer-events: none ;
background-size:cover;
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

}

但这不足以使jsplumb元素只读。请帮忙！

Answer 1

将 ConnectionsDetachable 全局属性设置为false以防止分离任何连接。

jsPlumb.importDefaults({
  ...
  ConnectionsDetachable: false
  ...
});

或使用可分离的属性来防止在特定连接上分离

var c = jsPlumb.connect({
    source:"someDiv",
    target:"someOtherDiv",
    detachable: false
});

Answer 2

所以有两种方法可以做到这一点：

初始化端点时，就像这样：

this.plumbInstance.addEndpoint(endpointName, {
    isEnabled: false,
    /* other plumb endpoint options */
});

或者，您也可以更改端点的状态：

plumbEndpoint.setEnabled(false);

通过将isEnabled更改为false，您无法将任何内容拖到该连接。但是，据我所知，您仍然可以在该端点上断开连接。为了防止这种情况，我编写了一个小的方法isValidConnection(endpoint1, endpoint2)，该方法检查端点是否可以连接。在这种方法中，您可以检查是否启用了端点，如下所示：

isValidConnection(endpoint1: Endpoint, endpoint2: Endpoint): boolean {
    const isValid: boolean = endpoint1.isEnabled() && endpoint2.isEnabled();

    // add more checks here if necessary.

    return isValid;
}

使jsplumb端点只读

2 个答案: