使jsplumb端点只读答案

【问题标题】：Making jsplumb endpoints readonly使jsplumb端点只读
【发布时间】：2016-09-28 09:51:35
【问题描述】：

这是我的要求。将有可以使用 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 元素成为只读的。请帮忙！

【问题讨论】：

标签： javascript html jsplumb

【解决方案1】：

使用 ConnectionsDetachable 全局属性为 false 以防止断开任何连接。

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：