CODEWITHSUNDEEP
javascriptjquery
rafaeltn
rafaeltn

Reputation: 99

How to connect draggable divs

I have some divs that I clone and can drag and drop in a area, now, I want to connect by lines the divs and if I move the divs, this lines must move too. Something like a flow diagram, I clone the divs using drag and drop, but still don't know how to do this lines.

Thanks!

Upvotes: 9

Views: 17154

Answers (3)

Krishna
Krishna

Reputation: 2481

you can use jsplumb library to achieve this. if you have two divs, div1 and div2, 

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions );  
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions );  
jsPlumb.connect({ 
    source:div1Endpoint,
    target:div2Endpoint,
    connector: [ "Bezier", 175 ],
    paintStyle:{ lineWidth:5, strokeStyle:'red' }
});

this should establish the connectors. if your divs are movables, then onmove, make a call to jsPlumb.repaint()

Link to jsPlumb demo - https://jsplumbtoolkit.com Jsplumb seems to have become paid now, (revised link above). However they do have a Community Edition

Community Edition This is the open source jsPlumb project hosted on GitHub that was first created in early 2010. It is a view layer technology that provides you with an API to establish connectivity between DOM elements, both programmatically and via mouse/touch events.

The Community Edition is free, and is licensed with an MIT or GPL2 license; you choose whichever suits your needs.

Toolkit Edition The Toolkit Edition wraps the Community edition with a focus on the underlying data model, as well as several useful UI features such as layouts, and a widget that offers pan/zoom functionality. It provides a fast way of building applications with visual connectivity at their core. To get a better feel for the capabilities of the Toolkit Edition, take a look through some of the demos or peruse the documentation.

The Toolkit Edition has a commercial, per-developer, license with optional access to email support (plus updates to new released versions for a year). License terms are available here. Feel free to jump in and buy a license right now using this form!

Roadmaps for both editions can be viewed here.

Upvotes: 10

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

sample

  • take two divs, divA and divB.

  • calculate the shortest distance between the closest borders of the divs

  • determine the middle coordinates of those closest sides of each div eg:

    A: {x:10, y:10}

    B: {x:20: y:10}

  • determine the intersection-point of lines from those points (C) C = AX, BY or AY,BX (depending on divA and divB positions)

  • create two divs, that represent AC and BC

tip:

position:absolute;
line-height:1px;
border:solid 1px;

repaint every time you move the divs with jquery.

note: as you can see, there are always 2 sides close and 2 sides far when the divs are not parallel.

Upvotes: 6

Jeff
Jeff

Reputation: 14279

I've thought about this before but I've never had a need to actually try to implement it. Try this:

Create a transparent GIF or PNG that has a diagonal line running from one corner to another. As you drag the divs around, stretch the image so that it's corners are always touching each div. You will probably need a diagonal-down image and a diagonal-up image and switch between the two based on the relative positioning of the two divs.

This will probably take some finesse to get it working well, but it is the best thing that I can think of to get diagonal lines in HTML.

Upvotes: 0

Related Questions