jsPlumb source endpoint does not move when source container is dragged

Question

Using jsPlumb, where bonds are created between subdivs that are inside draggable absolute positioned containers called .projects. These all appear in a large generic container #container

Which is set as the default container in the code jsPlumb.Defaults.Container=$("#container");

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

Everything works fine in one end but not the other. That is:

• When creating 2 absolute positioned .project containers with 1 task div in each

• Then making 1 bond connection from 1 task to the other.

• And dragging the .project container with the source end point - the source end point does not move.

Why is that the case?
When I make a cyclic bond from 1 task to the other and vice versa and move each .project, it all works like a charm.

Answer 1

To update connections of child(DIV) elements you need to make use of customised jQuery draggable instead of jsPlumb.draggable. Here is the customised jQuery draggable for your code:

newAgent.draggable({
        containment: 'parent',
        drag:function(e){
            $(this).find('._jsPlumb_endpoint_anchor_').each(function(i,e){ 
                if($(e).hasClass("connect"))
                    jsPlumb.repaint($(e).parent());
                else
                    jsPlumb.repaint($(e));
            });                                     
        }
    });

Updated Fiddle