【jsPlumb】禁止两个元素相互连接

1、使用beforeDrop事件来控制连接的创建。在这个事件中，可以通过判断连接的源元素和目标元素是否已经存在连接来决定是否允许连接的创建。如果源元素和目标元素已经存在连接，则可以阻止连接。

jsPlumb.bind("beforeDrop", function(info) {
    // 判断源元素和目标元素是否已经存在连接
    if (isConnectionExists(info.sourceId, info.targetId)) {
        return false; // 阻止连接的创建
    }
    return true; // 允许连接的创建
});

function isConnectionExists(sourceId, targetId) {
    // 判断源元素和目标元素是否已经存在连接的逻辑
    // 可以通过jsPlumb的`getConnections`方法来获取当前所有的连接，然后进行判断
    var connections = jsPlumb.getConnections();
    for (var i = 0; i < connections.length; i++) {
        var connection = connections[i];
        if (connection.sourceId === sourceId && connection.targetId === targetId) {
            return true; // 存在连接
        }
    }
    return false; // 不存在连接
}

2、在连接的connection事件中，如果两个元素相互连接，则可以立即删除连接。

jsPlumb.bind("connection", function(info) {
    // 判断两个元素是否相互连接
    if (isConnectionExists(info.sourceId, info.targetId) || isConnectionExists(info.targetId, info.sourceId)) {
        jsPlumb.detach(info.connection); // 删除连接
    }
});