How to update element position programmatically?

[rraallvv]

Hi community!

I’ve been googling for a while but can’t find a way to set the position for a given element programmatically using the jsPlumb API.

Say I want to change the position of a div element with id “xxx”

var element = document.getElementById(“xxx”);
element.style.left = newPos.x;
element.style.top = newPos.y;
// here do something to update the attached connections

Does jsPlumb have something to update the position of an element just by passing some id and the new position value?

Regards.

[Simon Porritt]

You need to call jsPlumb.revalidate(id or element) on the element you moved…

​

[rraallvv]

Thanks Simon,

Although it seems to work on a small page where I tested that functionality, I can't manage it to work on the page I want it to.

If you go to http://gootechnologies.github.io/shader-graph/editor/ you can add a new element cliking the vec4 option at the bottom of the page so that a new vec4 element is added at the top of the page. Then dragging the new element a bit to the right and connecting the rgba output in vec4 to rgba in the fragColor element you get this:

Inspecting the page's DOM I get that the vec4 element has the id "jsPlumb_2_2" and its rgba output has the id "rgba2".

Then in the browser console I run the following JavaScript lines:

document.getElementById("jsPlumb_2_2").style.top = "100px";
jsPlumb.revalidate("rgba2");

But the connection is not updated as shown in the picture below. I also tried revalidating the with the ids "jsPlumb_2_1", "jsPlumb_2_2" and "rgba1"

[Simon Porritt]

Yes that makes sense, because your app is using an instance of jsPlumb, not the static instance:

If you try the same thing using instance instead of jsPlumb you should be good. But not with rgba2 as the ID. You need to use the element, or the ID of the element:

var element = document.getElementById(“xxx”);
element.style.left = newPos.x;
element.style.top = newPos.y;
instance.revalidate(element);

​

[Rhody Lugo]

Thank you so much Simon, it's very much appreciated. I just needed to expose the jsPlumb instance like this:

window.jsPlumbInstance = instance;

Then I can interact with it from the browser console.

On Jun 26, 2016, at 7:32 AM, Simon Porritt <si...@jsplumbtoolkit.com> wrote:

Yes that makes sense, because your app is using an instance of jsPlumb, not the static instance:

<image.png>

If you try the same thing using instance instead of jsPlumb you should be good. But not with rgba2 as the ID. You need to use the element, or the ID of the element:

var element = document.getElementById(“xxx”);
element.style.left = newPos.x;
element.style.top = newPos.y;
instance.revalidate(element);

​

--
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/AiYcJ6n_4pQ/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/d/optout.