5

I'm struggling with jsplumbs just to do a simple thing. I'm just connecting divs with a single straight line, so how can i redraw the lines when resizing the window? So it always follows the center of the divs. Can i use z-index to put the line below the divs? if i have to connect one div with several other divs, what's the best approach to draw several lines from just one div ?

here is my code so far :

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

Thanks for your help

mrbangybang
  • 683
  • 1
  • 9
  • 22

2 Answers2

22

Here you are:

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

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

http://jsbin.com/esuvuw/9/edit to show that this is working.

mbochynski
  • 706
  • 7
  • 15
0

I also changed your code in that way: 

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 have no time right now - sorry. But now, when you drag divs, and then change size of window, everything is OK.

mbochynski
  • 706
  • 7
  • 15
  • I see, i didn't realize that i missed that library to draw, i thought it was only to active the touch in mobile devices. Thanks, for your help, but i don't need to have my divs "draggable", i just want to redraw the lines every times the user, resize the window, so the lines are always attached even if the divs moves. do you know if there's a function to re-draw the lines ? – mrbangybang Mar 25 '13 at 14:22
  • OK. I know. I just wrote what I used last time with jsPlumb. I think your connections don't move, because they are attached in bad way. I think you should try to create endpoinds and connect them. It should work. If I find a minute I'll try to update my answer. – mbochynski Mar 26 '13 at 08:28
  • I lied about touchpunch. You are right. It's not necessary. Sorry, I just always have it in my source code and that's why I thought it's necessary. Sorry for misleading you. – mbochynski Mar 26 '13 at 13:31
  • Hi, mbochynsky, so i tried your code, but it's the same that mine, the lines don't follow the divs. check it :
    http://jsbin.com/esuvuw/6
    How did you do, when you used jsPlumb ?     – mrbangybang Mar 26 '13 at 19:29
  • here is my latest code (in fact just slightly changed demo): http://jsfiddle.net/matbochynski/t39jz/embedded/result/ ... I played yesterday with your code to get what you want, but i couldnt achieve it. It looks like issue with centering the content. Are you sure that you have to do this (centering)? Writing this a new idea come to me... give me 5 minutes. – mbochynski Mar 27 '13 at 08:52
  • well, nice example, thanks. My problem, i want the lines to follow my responsive theme, so the divs are centered and keep a ratio when user resize the window, i just don't catch why jsPlumbs doesn't work like that, i think i have to erase/rewrite every time divs are in a new position. – mrbangybang Mar 27 '13 at 20:07