Geek Answers Handbook

Using jsPlumbs, redraw the lines when the window is resized?

I'm afraid with jsplumbs just to do a simple thing. I just connect divs to one straight line, so how can I redraw the lines when the window is resized? Therefore, he always follows the center of the divisions. Can I use z-index to put a line below divs? if I need to connect one div with several other divs, what is the best approach to make multiple lines from one div?

here is my code:

http://jsbin.com/esuvuw/1/edit

thanks for the help

+4
source share
2 answers

Here you are:

$(window).resize(function(){ jsPlumb.repaintEverything(); });

Add this to your code. I just come across this repaintEverything () function and remind you of your post.

http://jsbin.com/esuvuw/9/edit to show that it works.

+18
source

I also changed my code as follows:

 jsPlumb.bind("ready", function(connection, e) { jsPlumb.addEndpoint('block-1', ['BottomCenter'], []); jsPlumb.addEndpoint('block-2', [], ['BottomCenter']); jsPlumb.draggable('block-1'); jsPlumb.draggable('block-2'); jsPlumb.connect({ source: "block-1", target: "block-2", connector: 'Straight' }); });

The code is NOT perfect. I don’t have time right now - sorry. But now when you drag the divs and then resize the window, everything is fine.

0
source

More articles:


All Articles