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/ - ＆gt;只需在框中双击两次，然后将一些输出O连接到输入I。

Answer 1

由于您没有为端点指定任何容器，因此默认情况下它将采用父DIV。连接具有父级的端点作为不同DIV的产生在奇怪的连接中。您需要为所有端点指定一个公共容器：

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

需要帮助才能获得正确的jsPlumb连接

1 个答案: