Add jsPlumb to existing jquery code

[GoogleCodeExporter]

Hello sir, I hv been trying to add jsplumb in an existing jquery code with no 
success, here is one simple example code 
http://jsfiddle.net/TaZqQ/

I have 2 div's #first and #second, what i need is after it is dropped to 
#target div jsPlumb become active on #first and #second, so they can connect 
with each other. I have to keep revert: "invalid" for draggable and i am not 
sure how exactly i would do that, your help can clear me more about this 
concept.

Thank you for any help.
Best Regards

Original issue reported on code.google.com by divxtam...@gmail.com on 17 Oct 2011 at 8:55

[GoogleCodeExporter]

I tried this but its not working as it should.
http://jsfiddle.net/8tYmF/

Thanks again.

Original comment by divxtam...@gmail.com on 17 Oct 2011 at 9:21

[GoogleCodeExporter]

if you set the "draggable" class on a div, or use jquery's ".draggable(..)" 
method, then jsPlumb has no knowledge of the element being dragged.  you should 
take the  "draggable" class off of your divs, and use jsPlumb's draggable 
wrapper instead:

jsPlumb.draggable(<some selector for your divs>, options);

this method wraps the underlying jQuery method but inserts a callback so 
jsPlumb can tell what's going on.

Original comment by simon.po...@gmail.com on 17 Oct 2011 at 11:06

[GoogleCodeExporter]

Thank you Sir for reply but I am not sure what i am missing here again, after 
applying jsPlumb.draggable #first and #second are not movable.

http://jsfiddle.net/8tYmF/5/

and how can I add revert: "invalid" for draggable.

Original comment by divxtam...@gmail.com on 18 Oct 2011 at 8:11

[GoogleCodeExporter]

If I add position:absolute to #first,#second, connectors are working fine but i 
loose that #target concept where i need to drop #first and #second. 

Original comment by divxtam...@gmail.com on 18 Oct 2011 at 8:16

[GoogleCodeExporter]

after adding position: absolute and revert option connectors are working fine 
but revert is not working.
http://jsfiddle.net/8tYmF/6/

what i need is like jquery revert example above
http://jsfiddle.net/TaZqQ/
so if #first and #second are not in #target they go back to there position and 
if they are in #target div they can only move inside #target.

Thanks again

Original comment by divxtam...@gmail.com on 18 Oct 2011 at 8:23

[GoogleCodeExporter]

looks like the revert option was failing because jsPlumb sets a default drag 
scope, which did not match the scope on the droppable you set up.  this version 
of the jsfiddle shows the revert working - sort of:

http://jsfiddle.net/sporritt/8tYmF/10/

.. i set a scope of "foo" on the draggable and droppable options.  

there is still the problem that jsPlumb does not know when the revert plugin 
has kicked in, and so the div's endpoint is not updated when a div reverts.  i 
guess you need to figure out how to get the revert mechanism to call you back, 
and then you would call jsPlumb.repaintEverything() (or perhaps just repaint 
the id of the div being reverted: jsPlumb.repaint("someDivId");

Original comment by simon.po...@gmail.com on 19 Oct 2011 at 12:24

[GoogleCodeExporter]

Thank you sir, here i applied your idea :)
http://jsfiddle.net/8tYmF/12/

Original comment by divxtam...@gmail.com on 19 Oct 2011 at 12:35

[GoogleCodeExporter]

cool. but you still don't have the callback...you need to figure out how to get 
that revert plugin to tell you when it has done something.

Original comment by simon.po...@gmail.com on 19 Oct 2011 at 12:37

[GoogleCodeExporter]

ok sir I will keep digging and update you, thanks for your support. 

Original comment by divxtam...@gmail.com on 19 Oct 2011 at 12:47

[GoogleCodeExporter]

Original comment by simon.po...@gmail.com on 19 Oct 2011 at 2:31

• Added labels: Type-Other
• Removed labels: Type-Defect

[GoogleCodeExporter]

Here I came up with a new method sir, http://jsfiddle.net/8tYmF/13/
I have added revTest variable, if revert is not valid it will make it false and 
then run jsPlumb.repaint(this.id); in stop function. is that alright?

Best Regards

Original comment by divxtam...@gmail.com on 19 Oct 2011 at 11:42

[GoogleCodeExporter]

well if you're happy with it then that's the most important thing! but yes, 
that is what i was talking about. looks good.

Original comment by simon.po...@gmail.com on 19 Oct 2011 at 7:48

[GoogleCodeExporter]

Thanks sir for all your kind help, now i was finding a way to save UI after 
draw, I am able to store connection details but not exact UI position after 
draw yet, I read on your blog you will not support this feature as its only 
display technology but it will be a nice feature to at least provide one 
function which can give option to save images position which we can reload 
later.

anyway thanks again for your great help.
Best Regards

Original comment by webbuild...@gmail.com on 19 Oct 2011 at 9:15

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

you don't need me to provide a function to save the positions of elements on 
screen -  it's like four lines of code!

$("someSelector").each(function(i, el) {
  var o = $(el).offset();
  // do something with 'o'.
});

..where "someSelector" will of course be different for everybody.

i'm going to close out this issue now because i like to keep the issue list 
nice and focused - so i will be marking this 'invalid'.  which is not to say i 
consider this whole thing invalid (i will probably write a blog post about it, 
in fact), but google code has no better option for me to choose.

Original comment by simon.po...@gmail.com on 19 Oct 2011 at 9:48

[GoogleCodeExporter]

sorry i will open a new issue for next time if its different concept.  i will 
check that code for saving Sir, actually I was looking a solution to make graph 
visually and I saw a post on a site where that guy named dkersten  mentioned 
about jsPlumb and he was not able to save it at this post so i thought to ask 
you.
http://news.ycombinator.com/item?id=2708798

Thanks again for all your help. 

Original comment by webbuild...@gmail.com on 20 Oct 2011 at 12:18

[GoogleCodeExporter]

oh i dont mind you following up, no problem. 

it would have been futile to open a new issue anyway, as i'm not going to add 
anything to jsplumb to to this ;)

there's a blog post about it here:

http://jsplumb.tumblr.com/post/11297005239/why-doesnt-jsplumb-offer-a-save-funct
ion

Original comment by simon.po...@gmail.com on 20 Oct 2011 at 4:48

[GoogleCodeExporter]

Thanks again for your help sir, I managed to save UI state with above 4 lines 
of code you provided above with offset(), and also connections detail with help 
of your blog post and one example i saw here 
http://jsplumb.org/jquery/draggableConnectorsDemo.html

and now creating graph parts is 100% complete and I am on point to reload that 
saved graph.Now actually I need a bit more advice from you if you dont mind.

I first load page for creating connection between #first to #second with this 
code http://jsfiddle.net/8tYmF/13/ and save its positions and connection 
details in my database.

Next I loaded that saved UI in browser with PHP and dynamically creating those 
div's (#first,#second) and append to body. 

var newDiv = $('<div id="first" class="myTest" style="left: 51px;top: 
107px;">First</div>');

var newDiv2 = $('<div id="second" class="myTest" style="left: 90px;top: 
232px;">Second</div>');
(those positions left,top and div id's were saved in database)
here is complete code: http://jsfiddle.net/wFASU/1/

Now I am using this jsPlumb.connect function instead of jsPlumb.addEndpoint:
jsPlumb.connect({source:"first", target:"second"}, common);

And here are some issues after reloading saved graph UI:
1. I have lost scope for revert to #target, its not working.

2. Arrow is missing between line, I used this in options connectorOverlays: [ [ 
"Arrow", { location:0.45 } ] ]

3. I can't drop/drag more connection this way now.

Actually I wants it to load just as I am creating graph so I can add/edit 
connections. I apologize if I am asking a lot,
thanks for any help.

Original comment by divxtam...@gmail.com on 20 Oct 2011 at 10:02

[GoogleCodeExporter]

hello,

i think you're on track with this, but you need to make sure that when you 
recreate your UI you add the endpoints to the divs you create, and then connect 
them together.  using just jsPlumb.connect(...) means that jsPlumb will create 
its own Endpoints, using all the defaults (this is why you don't see your 
arrow, and why you cannot drag/drop any more connections etc), and join them 
together.  

so, create the divs like you were doing, then

var e1 = jsPlumb.addEndpoint(aDivYouJustCreated, { your endpoint options });
var e2 = ..the same thing on some other element...

then

jsPlumb.connect({source:e1:target:e2});

Original comment by simon.po...@gmail.com on 20 Oct 2011 at 10:11

[GoogleCodeExporter]

I have found solution for 1st, I had to move some code above so here is new 
working with revert:
http://jsfiddle.net/wFASU/2/

2. and 3. need your help.
Best Regards

Original comment by divxtam...@gmail.com on 20 Oct 2011 at 10:16

[GoogleCodeExporter]

GREAT, perfect sir that worked and all is on place now :)
http://jsfiddle.net/wFASU/4/

Thanks again for your kind help.
Best Regards

Original comment by divxtam...@gmail.com on 20 Oct 2011 at 10:21

[GoogleCodeExporter]

excellent!

i am interested, though, in the fact that you intuitively thought 
jsPlumb.connect would create endpoints you could use again...because, in fact, 
that seems like quite a cool idea.  so i'm setting the issue to 'New', while i 
have a think about what could be done.

Original comment by simon.po...@gmail.com on 20 Oct 2011 at 10:26

• Changed state: New

[GoogleCodeExporter]

that sounds good sir and actually I did not notice before that arrow is still 
missing
http://jsfiddle.net/wFASU/4/

Original comment by divxtam...@gmail.com on 20 Oct 2011 at 10:55

[GoogleCodeExporter]

nvm found solution again :)
http://jsfiddle.net/wFASU/5/

    var overlays = [
                [ "Arrow", { location:0.45 }]
            ];

jsPlumb.connect({source:e1, target:e2, overlays:overlays});

Regards

Original comment by divxtam...@gmail.com on 20 Oct 2011 at 11:00

[GoogleCodeExporter]

closing this issue out.

Original comment by simon.po...@gmail.com on 6 Nov 2011 at 12:07

• Changed state: Done

[GoogleCodeExporter]

Hi I have a problem in connecting need help as soon as possible.

Original comment by s...@kuplix.com on 10 Dec 2012 at 7:03

Attachments:

• example.rar