需要帮助才能获得正确的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");