Drag and Drop then Draw Line in JQUERY

[Nestle]

Hello,
I want to drag elements from datalist and drop them in a div.
when you drag an element you must draw a line from it to some point.
using asp.net and jquery

[nixnerd]

Why MUST you use asp.net?

[Nestle]

sorry HTML not asp.net

[nixnerd]

Ha ha ha. I get them confused all the time myself :)

jQuery makes it pretty easy to create drag and drop elements. Could you try creating a Codepen so we can help?

[Nestle]

plz check this:

http://codepen.io/Nestle/pen/aznyk

i need that when i drop an element to draw a line from it , and when drop another
element to automatically connected to the drawn line.

could you help me?

[Nestle]

http://codepen.io/Nestle/pen/aznyk

[nixnerd]

Well, first of all, your elements aren’t draggable yet. Let’s forget about the line for now.

See here:

http://jqueryui.com/draggable/

[Nestle]

please check now
http://codepen.io/Nestle/pen/aznyk

[nixnerd]

I’m not able to drag the numbers. I assume that’s what’s supposed to be happening.

[Nestle]

i have tried it on a stand alone application and it works fine.
may be the jquery library.

anyway when drop an item how to draw a line from that element
and automatically connected to seconde dropped element and so on.
could you help please?

[nixnerd]

Look into something like this:

http://stackoverflow.com/questions/4903530/how-to-get-the-position-of-a-draggable-object

You need to get the position of each element with a function that’s called every time you move anything. But… that’s a shipload of state management. Also… I’m not really sure how you should go about drawing the lines.

Typically, you’d use canvas for something like this. But… it looks like you’re trying to do some straight up DOM action. I would recommend this:

http://snapsvg.io/

In theory, you should be able to pass your coordinates to some function that handles the drawing of these svg lines.

Godspeed Nestle.

Hey, is there any way you could make this your Gravatar:

[nixnerd]

Snap.svg also makes things draggable. It’s pretty damn easy.

[Nestle]

Thank you so much NIX.
but i need an example if possible to draw a line between draggable elements.
i see the library JsPlumb, but i didnt know how to start.

[nixnerd]

The first thing you need to be able to do is drag something and console.log() the new position. As long as you’re able to somehow return the new position… you should be able to re-draw the line as it moves.

Now, AFAIK… this is NOT a trivial task. It may or may not work with SVG… I haven’t tried. It could surely work with canvas. But… canvas does have some limitations as far as I’m concerned.

[zinuhe]

Try this:
http://jsplumb.org/demo/flowchart/jquery.html

[Author]

Posts