jQuery draggable widget with path connectors

Question

Referring to the image, both Block1 and Block2 are draggable.

My question is : How do I make the Red coloured chain like connector in between the two blocks? Requirement is that the chain should extend to wherever the blocks are being dragged. Please provide any pointers to tutorials/study materials . Thanks.

enter image description here

1 . I have created the two blocks. 2 . I have created the individual blocks of the chain. Only the horizontal one as of now. Yet to create the rotated blocks for use at the corners. 3. When dragging Block2, I am obtaining the X and Y. 4. I am not able to figure out how to place the Red blocks with same gap between current and previous. 5. Is it OK to use so many divs? One div for each Red block. Will it be very heavy on the browser? — jumpa, Jun 06 '12 at 19:59
possible duplicate? http://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs — Kevin B, Jun 06 '12 at 20:00
Possible duplicate of [Drawing a line between two divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-divs) — balupton, Nov 05 '18 at 21:04

score 2 · Answer 1 · answered May 09 '16 at 13:32

There are lots of Jquery plugins for creating connectors for database visualization or for flowcharts. If somebody like me who was searching for such plugins might want to have a look at following plugins.

JointJS
Rappid
Mxgraph
GoJS
Raphael
Draw2D
D3
FabricJS
paperJS
JsPlumb
FlowChart

Following link might be helpful.

http://modeling-languages.com/javascript-drawing-libraries-diagrams/

score 1 · Answer 2 · edited Feb 20 '19 at 09:33

1

GoJS lets you define your own custom rendering of link paths, as shown in this sample: http://gojs.net/latest/samples/relationships.html

Here's how you can create the pattern of red chevrons when you define your link template:

$(go.Link, go.Link.Orthogonal,
  $(go.Shape,
    {
      stroke: transparent,
      pathPattern: $(go.Shape,
       {
         geometryString: "F1 M2 3 L0 0 6 0 8 3 6 6 0 6z",
         fill: "red",
         strokeWidth: 0
       })
    })
)

This creates the following result:

edited Feb 20 '19 at 09:33

icc97

11,395
8
76
90

answered May 10 '16 at 04:37

Walter Northwoods

4,061
2
10
16

2

For transparency I think it's worth mentioning that you're the developer of GoJS. It is a great library though. – icc97 Feb 20 '19 at 09:31

jQuery draggable widget with path connectors

2 Answers2

Linked