拖动源容器时，jsPlumb源连接器不移动

Question

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

    var conn = "";
    var instance = "";

    $(function(){
        create_line("b");

        $('#b').click(function(){
            create_line("b");
        });

        $('#c').click(function(){
            create_line("c");
        });
    });

    function create_line(el){
        jsPlumb.ready(function() {

            if(conn!=""){
                jsPlumb.detach(conn);
            }

            instance = jsPlumb.getInstance({
                Anchors : [ "Center", "Center" ],
                DragOptions : { cursor: 'pointer', zIndex:2000 },
                EndpointStyles : [{ fillStyle:"red", outlineColor:"white", outlineWidth:10 }, { fillStyle:"red", outlineColor:"white", outlineWidth:10 }],
                Endpoints : [ ["Dot", { radius:5 } ], [ "Dot", { radius:5 } ] ],
                PaintStyle : {
                    strokeStyle:"red",
                    lineWidth:3
                }
            });

            var a = jsPlumb.getSelector("#a");

            instance.draggable(a);

            conn = instance.connect({
                source:a,
                target:el,
                connector:[ "Straight" ]
            });

        });
    }

http://jsfiddle.net/wwc7G/5/

当 Windows 加载 #a 和 #b 之间的线路连接器时移动，但是当我单击 #c 时，#a 和 #c 之间的线路连接器不会移动。

请帮助并为我的英语感到抱歉。

Answer 1

从makeSource 调用中删除parent 对我有用。

http://jsfiddle.net/wwc7G/27/

jsPlumb.ready(function() {

  jsPlumb.Defaults.Container=$("#container");
  jsPlumb.Defaults.PaintStyle = { strokeStyle:"#F09E30", lineWidth:2, dashstyle: '3 3', };
  jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"#F09E30" };
  jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});

  var i = 1;

  $('#addproject').click(function(e) {
    var newAgent = $('<div>').attr('id', 'project' + i).addClass('project');
    newAgent.text('Project ' + i);

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

    jsPlumb.draggable(newAgent, {
      containment: 'parent'
    });

    i++;
  });

  $("#container").on('click','.project',function(e) {
    var newState = $('<div>').attr('id', 'state' + i).addClass('task');

    var title = $('<div>').addClass('title').text('Task ' + i);
    var connect = $('<div>').addClass('connect').text('click here to drag a bond');

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

    newState.append(title);
    newState.append(connect);

    $(this).append(newState);

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

    jsPlumb.makeSource(connect, {
      anchor: 'Continuous'
    });

    newState.dblclick(function(e) {
      jsPlumb.detachAllConnections($(this));
      $(this).remove();
      e.stopPropagation();
    });

    i++;    
  });  
});