CODEWITHSUNDEEP
jqueryjquery-uisvgraphaeldraggable
objectobject
objectobject

Reputation: 53

Draw a line between two draggable elements

I have a series of divs that are draggable upon clicking them. When you release the mouse, the div will animate back into its original position.

I want to be able to draw a straight line between any two of these draggable divs. The line should start at the center of one div and end at the center of the second div. When I click and drag one of the divs, the line should remain connected to both divs, stretching/shrinking as needed dependent upon the amount of space between the two divs. When the mouse is released, the line should still remain connected to the divs.

I have the draggable divs working correctly. I'm just really not sure at all on how to solve for the line drawing portion. Any guidance would be very much appreciated.

Upvotes: 5

Views: 8913

Answers (1)

Joe
Joe

Reputation: 2105

this article runs through a fairly complex way of drawing a line with jquery and some css transforms - personally never tried it but probably worth a look

there's also always canvas but i believe that would probably be even less practical in this instance

finally this answer has a few other ideas including js libraries that could potentially solve your problem

Upvotes: 3

Related Questions