JsPlumb:如何动态创建新连接

时间:2014-06-17 17:58:04

标签: javascript jquery connection jsplumb

这是我遇到过的一个问题。

    for (var i=0; i < arr.length; i++) {
        var instance = initializeInstance(wrapperID);
        allConnections.push(instance.connect ( 
            { 
                source  : connectionsArray[j].source, 
                target  : connectionsArray[j].target
            }
        ));
        jsPlumb.fire(".some-selector", instance);
    }

所以这就是我在元素之间保存页面上所有连接的方式。用户可以动态地向页面添加新元素......他/她是通过将鼠标指针从页面上的一个元素拖到另一个元素来实现的...我不知道如何将新创建的连接添加到我的allConnections中阵列。

   newInstance = initializeInstance(wrapperID);
   newInstance.bind('connection', function(info){
       //   TO DO: push to allConnections Array newly created connection
       //   allConnections.push(this.connect(info.sourceId, info.targetId)); - this line does'n work :(
   });

如何在UI上将新创建的连接添加到我的allConnections数组?????

1 个答案:

答案 0 :(得分:0)

为什么需要自己的阵列?您始终可以query jsPlumb返回所有连接。

jsPlumb.getAllConnections()jsPlumb.select()

上面将返回一个连接数组。您可以在任何地方使用它,而不是使用allConnections(来自相关代码的数组)

文档 - http://jsplumbtoolkit.com/doc/querying

其次,如果您仍想将其添加到数组中,则可以绑定到jsPlumb提供的事件。每当创建新连接时都会触发connection事件。

文档 - http://jsplumbtoolkit.com/doc/events#evt-connection

第三,不需要创建jsPlumb的多个实例。您只需使用jsPlumb.connect或创建一个实例即可。到处使用它。目前,该代码使用jsPlumbinstancenewInstance,最后两个现在每隔一段时间创建一次。然后

相关问题