How to clone draggable jsPlumb element ?

[TM]

Hi,

Can anyone help me?

I would like to clone a draggable element. This is possible in jQuery using a helper. But how to do this in jsPlumb? I'm able to to create a draggable jsPlumb element.

I would like to display on top of a webpage some icons and allow them to be dragged to a canvas. After they have been moved to the canvas, I would like to be able to connect them using jsPlumb.
After the icons have been placed on the canvas, I would like to be able to drag them again, but no longer cloning the icon when dragging it.

Here is an example:

http://jsfiddle.net/TM1977/QajVF/6/

How do clone an object?

Thanx

TM

[oliver....@in2code.de]

Hi,

i had the same question like you and i thought it was a bug, so i reported it:

http://code.google.com/p/jsplumb/issues/detail?id=316

He won't fix it, so.. jeah.. i don't have any idea either.

The only option is to use the jQuery UI function.

maybe you could use a kind of fallback like this:

http://jsfiddle.net/QajVF/15/

does not work very fine and the endoints don't clone, too, but i'll hope this gives you a hint

[Simon Porritt]

It's true, I don't consider it a bug.  it is perhaps a feature request, but if so, it's a feature request with very little chance of being assigned priority. 

it looks to me like the original poster was actually asking for something different to your request. he wanted to clone an icon at drag time - using helper:clone - and then when it was dropped, configure some copy of it with jsplumb draggable.  that could have been done easily enough: a normal jquery draggable call with helper:clone on the icons, and then on drop you just add a new element to the workspace and hit it up with jsPlumb.draggable.

your request is, i think, that you have some element that uses the helper:clone when dragged, and so the helper would have copies of all of the original element's endpoints and their connections. is that right?

[Hennie R]

Hi,

Is there any solution to this problem yet?

Thanks

[Simon Porritt]

You can set `clone:true` on a call to `jsPlumb.draggable` now, for example:

http://jsfiddle.net/ymtyB/4/

note that this uses jsPlumb 1.7.10; the original fiddle uses 1.3.16.  but note that this probably does not address anyone's particular issue. the original poster was asking to be able to drag stuff onto a canvas using clone (which you could do now with jsPlumb.draggable), but then subsequently to switch off the clone (which is not possible). So his use case could be fixed by using the clone to drag/drop new nodes, then discarding them and creating a new one and configuring it to be a "normal" draggable. If that's what you're looking for too then you're in luck. If you're looking for the ability to drag a clone with all of its endpoints attached, then you are not in luck. It is still the case that it would be really messy to have to support that.

[Hennie R]

Thanks a lot for the advice and explanation, Simon.