jumping endpoints with nested element dragging

[Gregor Raschke]

Hi all,

this is my first post in this group, so please be gentle ;-)

In my application I have modeled some pages (as div-container), that have nodes (div-container as well) in them. 

Those nodes can be connected to every other node on the same page, or on other pages. Every page and every node

is draggable (pages can be moved freely, nodes are contained in there page).

The problem occurs when I drag a page, that is some endpoints are jumping while I move the page. When I let go, the

endpoint snaps back to place. If I drag a single node everything is fine.

I made a very simple fiddle, which can be found here: http://jsfiddle.net/WcmEL/1/

I already tried repainting everything on dragging-progress-event, but that does not help.

Any suggestions on what I can do to fix this?

[Gregor Raschke]

A small addition:

while playing with the fiddle I realized another strange behaviour:

When I drag the nodes multiple times from place to place, the connections move away from the endpoints, too (see screenshot).

I'm a big fan of jsPlumb and hope that those mishaps can be easily resolved.

[Simon Porritt]

You have actually hit a bug in the current version of jsPlumb, which is fixed in 1.5.0.  As it happens I spent some time this afternoon finalising the 1.5.0 release and I have a dry run of it on my server; this fiddle points to it:

http://jsfiddle.net/WcmEL/3/

when you drag the `.page` divs, the `.node` divs track correctly.  however, when you drag a node div and then subsequently drag its parent, the connection does not update.

This is due to the situation explained in the 'Nested Elements Offsets' section of this page:

http://jsplumbtoolkit.com/doc/setup#dragging

...and so can be remedied by making a call to `jsPlumb.recalculateOffsets` in the drag stop callback for the `.node` elements, as in this fiddle:

http://jsfiddle.net/WcmEL/5/

[Gregor Raschke]

Hi,

that was fast. Cool, so when is 1.5.0 coming out, or do I steal it from the fiddle? ;-)

Best regards and keep up the good work

2013/8/6 Simon Porritt <simon....@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "jsPlumb" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsplumb/IoOW2tw5IXY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Simon Porritt]

i'm in that final phase where everything seems to be squared away but i have this niggling feeling like i've forgotten something!  soon.  hopefully tomorrow.  by all means yoink it from the fiddle if you want - it's on the dev/1.5.0 branch on GitHub right now anyway; it's not super-secret.  and if anything changes it won't be anything significant.

[Simon Porritt]

...btw i don't know if you noticed, but in that second fiddle i consolidated your drag selectors down, eg:

jsPlumb.draggable($(".page"))

instead of having to do each one by its id.

[Gregor Raschke]

I didn't notice, but in my real Application each node is inserted one at a time, so I guess that wouldn't really help me.

Not sure, if I should open a new thread, but I have another question:

In my application, those pages can be minimized and in the minified state the nodes become list-items.

My question: how would I reconnect the list-items with nodes of other pages? Would I delete old connections and 

endpoints and create new ones, or is it possible to move endpoints from one html-object to another?

2013/8/6 Simon Porritt <simon....@gmail.com>

...btw i don't know if you noticed, but in that second fiddle i consolidated your drag selectors down, eg:

jsPlumb.draggable($(".page"))

instead of having to do each one by its id.

--

[Simon Porritt]

There is a 'setElement' method on Endpoint which changes the element the Endpoint is assigned to:

http://jsplumbtoolkit.com/apidocs/files/jsPlumb-1.4.1-apidoc.html#Endpoint.setElement(el,[container])

this should do what you need, i think.

[Gregor Raschke]

It's me again,

I tried the setElement-method, but got an error of  'Uncaught TypeError: Object [object Object] has no method 'getAttribute'

I couldn't debug it, because the 1.5.0 is 'too large' for my debugger^^

I build a fiddle that roughly reproduces the issue: http://jsfiddle.net/tyregor/exbZP/1/

Hope this is only a small bump on the road...

[Simon Porritt]

1.5.0 is too large for your debugger!  are you on a 286???

you need to pass it a DOM element for now. not a selector.  i will change the code before the 1.5.0 release to support a selector aswell.

[Gregor Raschke]

Maybe it's a 286, I never tell.

Ok changed it to

ep1.setElement( $('#row-node1').get(0), true ) (see http://jsfiddle.net/tyregor/exbZP/2/)

and the result is now: Uncaught TypeError: Cannot call method 'createDocumentFragment' of undefined

[Simon Porritt]

the second argument to that function is not a boolean; it's an optional DOM element that lets you specify a custom 'container' for it (so you'd never really use it).

having said that, in this fiddle it doesn't position properly:

http://jsfiddle.net/exbZP/11/

(you have to click the .page element to get it to swap)

[Gregor Raschke]

That was embarrassing. Thanks for the info

[Simon Porritt]

no problem...i am of course looking at this.  but i'm heading out now so i wont get back to it until a little later.

[Gregor Raschke]

So I played a little more with the whole 'setElement' thing and encountered another issue.

Please have a look at this fiddle: http://jsfiddle.net/tyregor/Ac4GJ/1/

If you click on the node on the left, the endpoint is moved to the list item on the right. So far so good.

I actually also change the anchor of that endpoint too, which seems to be ignored.

If I now drag the node on the left a little, the endpoint reappears on that node with the changed anchor...

[Gregor Raschke]

Automagically fixed^^

Always link your fiddles to the server-version of the author...

[Gregor Raschke]

I hope I don't annoy you to much by now, but I still have some issues.

I made the list-container now draggable (see http://jsfiddle.net/tyregor/Ac4GJ/3/) and if I drag it after I changed the endpoints, one moves along and one stays in place.

[Simon Porritt]

ha ha, yeah.  but it's not 100% there yet: you can't drag from the endpoint after it has moved. this is due to the fact that the element is removed from the DOM and then re-added. but in fact since the parent it hangs off doesn't actually change, that doesn't need to happen. so for 1.5.0 i am temporarily removing the 'container' argument, and i'll see about putting it back in in a later version.  i'll update this thread again once i've made the other couple of outstanding changes.

[Simon Porritt]

oh i just saw your other email. right. it's not fixed yet.  i will update this when it is fixed.

[Simon Porritt]

Here's the latest:

http://jsfiddle.net/Ac4GJ/21/

In this fiddle I've added another element, that has a source/target endpoint on it.  This for testing the setElement method properly - when it switches it should of course take all of its connections with it.  So you can try dragging from node 3 to node 1 and then clicking on node 1, and also dragging from node 1 to node 3 and then clicking on node 1.  both cases should work.

let me know how you go.

[Gregor Raschke]

The fiddle looks promising. I will test it tomorrow with my actual code and get back at you.

[Gregor Raschke]

So I integrated the current version and what can I say other then: Thanks you very much. Works like a charm

[Simon Porritt]

Excellent!  Thanks for getting back to me about it.