source endpoint connecting with a target endpoint in the same div when trying to connect with a target in a different div

[Saminda]

I'm sure I'm missing something here. But I cant seem to find the
problem. in the following http://jsfiddle.net/vbC7V/ when trying to
connect source of windows1 to the target from window2 it visually
shows that it connects to target in the window1 instead. But assuming
that the link got connected to window2 if you click and drag the
target endpoint in it the link seem to move in parallel as if i
clicked and dragged the target endpoint in window1.

this is what i originally tried to do. in a different example i added
a div which was inside another div and added endpoints. but when i
dragged the div the endpoint did not move with it (i did do the
jsPlumb.draggable(....)). With some googling I saw in one answer to a
question asked you've answered saying to add the "container" for the
endpoint options. which i did and the dragging issue was solved. but
then this connecting to wrong endpoint issue occurred.

[Saminda]

I temporary solved my original problem by avoiding the jquery command
for dragging $("#window1").draggable() for the div and then removing
the "container" from the endpoint options when adding an endpoint. but
i would still like to know where i went wrong in the above example.

Thanks,
Saminda

On Feb 29, 3:05 pm, Saminda <samin...@gmail.com> wrote:
> I'm sure I'm missing something here. But I cant seem to find the

> problem. in the followinghttp://jsfiddle.net/vbC7V/when trying to

[Simon Porritt]

The function at the top of the jsFiddle in which you used jQuery's
draggable method was being run before the jsPlumb init code, and when
jsPlumb determines an element is already draggabled it does not attach
its own listeners (because it can't). Removing that makes your code
work, but I also had to take out the 'container' arguments: container
is for telling jsPlumb what element will be the common parent across a
number of endpoints, and is only required if your endpoints would not
naturally end up with a common parent. with your setup all endpoints
would be added as children of 'demo' so you do not need it.

dragging was not actually working with your jsfiddle, it just looked
like it was, because the endpoints on those elements were children of
the element that was being dragged.

try this:

http://jsfiddle.net/sporritt/vbC7V/3/

Simon

--
Simon Porritt

+61 (0) 459 762 779

[Saminda]

Thanks for the explanation Simon. It solved the original problem I
had.

Now I have a slightly new problem. I changed your jsFiddle (http://
jsfiddle.net/sporritt/vbC7V/3/) slightly with the parent div "demo"
having float:auto this was the setup on which i'm originally working
on . (and to demonstrate the issue i put a fixed height and drew a
border around the parent div). when I run the jsFiddle everything
looks fine and the the divs and endpoints paint nicely as they should
be. but since I've allowed overflow and a low height you may notice
the scrollbar appeared. without touching the window1 or window2 if i
scroll the parent div the window1 & window2 gets scrolled as they
should be but the endpoints of those windows remain in the same screen
coordinates, not moving with the scroll along with the windows. If I
do a slight move of a window1 then the endpoint positions correctly
gets updated.

Thanks,
Saminda

On Feb 29, 3:28 pm, Simon Porritt <simon.porr...@gmail.com> wrote:
> The function at the top of the jsFiddle in which you used jQuery's
> draggable method was being run before the jsPlumb init code, and when
> jsPlumb determines an element is already draggabled it does not attach
> its own listeners (because it can't).  Removing that makes your code
> work, but I also had to take out the 'container' arguments: container
> is for telling jsPlumb what element will be the common parent across a
> number of endpoints, and is only required if your endpoints would not
> naturally end up with a common parent.  with your setup all endpoints
> would be added as children of 'demo' so you do not need it.
>
> dragging was not actually working with your jsfiddle, it just looked
> like it was, because the endpoints on those elements were children of
> the element that was being dragged.
>
> try this:
>
> http://jsfiddle.net/sporritt/vbC7V/3/
>
> Simon
>
>
>
>
>
>
>
>
>
> On Thu, Mar 1, 2012 at 7:05 AM, Saminda <samin...@gmail.com> wrote:
> > I'm sure I'm missing something here. But I cant seem to find the

> > problem. in the followinghttp://jsfiddle.net/vbC7V/when trying to

[Saminda]

Also if I drag a part of the window out from the visible area of the
parent div (which makes the scrollbars appear) the endpoints in that
window that should get hidden along with the part of the window that
gets hidden, seem to show outside the parent div. Is there a way to
tell the endpoint to be contained within the parent div?

> > > problem. in the followinghttp://jsfiddle.net/vbC7V/whentrying to

[Saminda]

Sorry Simon, didn't realize I was supposed to fork the existing one to
have the changes in jsFiddle.

here's the sample:

http://jsfiddle.net/ArXA5/

[Simon Porritt]

The problem you're having is that you've marked the draggable windows
as position:relative; they have to be position:absolute to support
dragging (this is not just a jsPlumb constraint).

coupled with that, you have to make their container position:relative
(again, not a jsPlumb constraint).

so, try this:

http://jsfiddle.net/sporritt/ArXA5/29/

a couple more things to note about the fiddle you sent me:

- 'setDragAllowedWhenFull' is a method; you want 'dragAllowedWhenFull'
in an Endpoint spec.
- jsPlumb.draggable can take selectors :
jsPlumb.draggable($("#window1, #window2"));
- sooner or later you were probably going to run into a problem with
the z indices. you need to ensure you set them correctly. i set
window1 and window2 to 5, and then added these styles for the jsplumb
elements:

._jsPlumb_connector {
z-index:4;
}

._jsPlumb_endpoint {
z-index:6;

[Saminda]

This is great. This solved few other issues I had as well. Thanks
Simon for the help.