I'm using jsPlumb, trying to make it so that any div (a task) inside an absolute positioned container (a project) can connect to other divs (tasks) inside that container or to divs in other containers (in other projects).
It works fine when the projects are not draggable, and therefore not position:absolute;
meaning .item has position:absolute; and .project does not.
http://jsfiddle.net/wwc7G/2/
The problem occurs when I make the .projects draggable - so they would have position:absolute - what happens is the bonds between divs (tasks) not within the same project container become out of place/don't connect.
http://jsfiddle.net/wwc7G/1/ (this is the fiddle I'm trying to fix)
As an example,
When 2 projects exist and each have a task, connecting these tasks won't work correctly when the projects are draggable (position:absolute;)
Is there any way I could make it so that I could drag the projects while the bonds between the tasks inside the projects are still consistent?
It's because the container of the two DIV's which you are trying to connect are different. So you need provide a common container by including the below code:
jsPlumb.Defaults.Container=$("body");
Here is the updated Fiddle