需要幫助才能獲得正確的jsPlumb連接

Question

我想爲每個項目有不同的輸入和輸出連接器。用戶應該能夠檢測輸入和輸出，例如輸出1到輸入1或輸入2或輸出2到輸入1或輸入2。

問題是我會在物品之間獲得非常有線的連接。

jsPlumb.ready(function() { 

      var i = 0; 

      $('#container').dblclick(function(e) { 
      var newState = $('<div class="item"></div>'); 

      var connIn = $('<div>').addClass("connector").addClass("in"); 
      var in1 = $('<div>').text("I1"); 
      var in2 = $('<div>').text("I2"); 
      var connOut = $('<div>').addClass("connector").addClass("out"); 
      var out1 = $('<div>').text("O1"); 
      var out2 = $('<div>').text("O2"); 

      var title = $('<div>').addClass('title').text('State ' + i); 
      var connect = $('<div>').addClass('connect'); 

      newState.css({ 
       'top': e.pageY, 
       'left': e.pageX 
      }); 

      jsPlumb.makeTarget(in1, { 
       anchor: 'Continuous' 
      }); 

      jsPlumb.makeTarget(in2, { 
       anchor: 'Continuous' 
      }); 

      jsPlumb.makeSource(out1, { 
       parent: newState, 
       anchor: 'Continuous' 
      }); 

      jsPlumb.makeSource(out2, { 
       parent: newState, 
       anchor: 'Continuous' 
      }); 

      //newState.append(title); 
      //newState.append(connect); 
      newState.append(connIn.append(in1).append(in2)); 
      newState.append(connOut.append(out1).append(out2)); 

      $('#container').append(newState); 

      jsPlumb.draggable(jsPlumb.getSelector(".item"), { containment:"#container"});   
      i++;  
      }); 
     }); 

我已經做了搗鼓示範http://jsfiddle.net/c9BJ9/2/ - >只需雙擊在框中兩次，一些輸出O連接到工作輸入一

Answer 1

既然你沒有指定端點任何容器，默認情況下它將採用父DIV。將具有父級的端點連接成奇怪連接時的不同DIV產量。您需要爲所有端點指定一個通用容器：

jsPlumb.Defaults.Container=$("#container");