jsPlumb：拖動新的連接應該刪除現有

Question

使用jsPlumb，我設法具有以下設置：

• 有作用就像一種特殊類型的流程圖的節點的多個節點。
• 每個節點都有一個可以連接的單個目標。
• 每個節點都有零個，一個或多個出口。每個出口都充當jsPlumb源，並且最多允許一個連接。

小例子第一：http://fiddle.darkspot.ch/ivr/flowchart/ivrplumb.html （嘗試一個小時後，我很遺憾沒有得到它在運行的jsfiddle - 所以我主持它自己）

我想實現的是： 如果用戶從一個出口拖動一個新的連接到另一個節點，它應該按照預期建立。但是在這個出口上的所有其他連接都應該被刪除。

我嘗試不同的方法：

• 上具有每個出口泡click listener（鏈接到jsPlumb文檔）。不起作用 - >無論我嘗試過什麼，事件都不會被解僱。
• 有一個實例connection listener。我想我可以從我收到的info對象中的端點獲得現有的連接。查看示例時打開控制檯，無論有多少個連接，都會看到它始終爲1。
• 限制maxConnections爲makeSource(...)致電1。這實際上可行，但用戶不能拖動另一個連接來替換第一個連接。

重現步驟：

1. 將鼠標移動到橙色的廣場之一，單擊並拖動一個連接的另一個節點。 （連接應該建立）
2. 打開瀏覽器的JavaScript控制檯
3. 將鼠標移至同一方塊並單擊/拖動另一個連接至同一個或另一個目標節點。 （第二次連接應該建立，看控制檯打印Number of connections:1，這裏應該是2）

我在做什麼錯？

Answer 1

建立新連接之前，請檢查源是否已經有傳出連接，如果是，請將其刪除。假設出口元素有exit類別：

jsPlumb.bind('beforeDrop', function(ci){ // Before new connection is created 
    var src=ci.sourceId; 
    var con=jsPlumb.getConnections({source:src}); // Get all source el. connection(s) except the new connection which is being established 
    if(con.length!=0 && $('#'+src).hasClass('exit')){ 
     for(var i=0;i<con.length;i++){ 
      jsPlumb.detach(con[i]); 
     } 
    } 
    return true; // true for establishing new connection 
});