Draw an arrow between two divs

javascript jquery html css canvas

58,922

Solution 1

You might consider SVG.

enter image description here

In particular, you can use a line with a marker-end shaped with an arrow-path.

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

Solution 2

I have no idea whether anybody looks at this thread anymore but here's the solution i used, it differs only slightly from @markE answer in that this answer makes it much easier to specify exactly where the line needs to start and stop.

<head>
  <style>
    .arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }
  </style>
</head>

<body>
  <svg height="210" width="500">
    <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
               orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
        </marker>
    </defs>
    
    <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
  </svg>

</body>

All you have to do is change the x and y coordinates of the line! I used this answer in my react app and it worked beautifully. And heres the fiddle.

.arrow {
  stroke: rgb(0, 0, 0);
  stroke-width: 2;
  marker-end: url(#markerArrow)
}

<svg height="210" width="500">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
    </marker>
  </defs>
  <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
</svg>

Solution 3

I highly recommended this library: https://anseki.github.io/leader-line/

It's pretty powerful, fast, super easy to use and it worked flawlessly for me.

Solution 4

Use a library, like JSPlumb: https://jsplumbtoolkit.com/

View more solutions

58,922

Author by

Alexander P

Updated on July 09, 2022

Comments

Alexander P almost 2 years
I'm searching for a solution of the question that I expected to be solved already. But I saw only big projects with a lot of features but no simple solution.

Actually I need to get something like that:

So to get an arrow drawing over a div containing some squares (divs)
```
<div id="container">
<div class="white_field"></div>
<div id="1" class="black_field">
<br style="clear:both;">    
<div id="2" class="black_field">
<div class="white_field"></div>
<br style="clear:both;">    
<div id="3" class="black_field">
<div class="white_field"></div>
</div>
```
I looked in the canvas direction but stumbled on tha canvas was not visible behind my divs ( maybe some z-index should help ) But still strange that I couldn't find some ready-made solution of a problem that seems to me coming up often. ( to explain some thing on the site arrows are almost a must )
c69 over 10 years

unless you want to write and debug something like THIS: stackoverflow.com/a/623770/946789
Alexander P over 10 years

That was exactly what I need.
Alexander P over 10 years

JSPlumb is what I meant in the question "But I saw only big projects with a lot of features but no simple solution."
jjm about 10 years

@AlexanderPresman - if it's exactly what you needed, maybe you should accept the answer ;)
David Roundy almost 8 years

I'm confused: I don't see anything here about connecting two elements. Am I missing something, or is the idea somehow that I may divine the location of the elements myself?
markE almost 8 years

@DavidRoundy. Exactly, the question is about the connector rather than finding divs. But since each div has an #id so you can use getComputedStyle to find its position and size. Cheers! :-)
tugberk almost 8 years

how can you change the width of the arrow? I was not able to find which part is making that effect :s
Timo Kähkönen almost 8 years

@tugberk Just setting stroke-width to path style. Because marker uses markerUnits="strokeWidth" as a default, the arrow may become too large. But it is easy to adjust using transform:scale(). jsfiddle.net/9aCsJ/1007
Cody Fidler over 7 years

I know that this is rather late, I modified @markE fiddle to create an arrow between an element that already exists and a created element within 1000px (can be defined) without affecting the position of the original element. Haven't had enough time to play around with it not affecting other elements around it, but will work more on it later. I'm creating templates with Casper, so I thought it might be useful. jsfiddle.net/Cody0913/yggrkb15/3
Cody Fidler over 7 years

Update to my prev comment, added a span in background to take place of element being pointed at and positioning is determined in function call jsfiddle.net/Cody0913/yggrkb15/6 I hope this helps anyone that needs this.
Joshua Pinter about 7 years

@Shrewmouse Oh no, it appears the sandbox has been removed. I guess that's why they suggest putting the code in the answer itself so it's preserved. Damn. Will update the answer.
shrewmouse over 6 years

Yeah, it's only $3500
sidgeon smythe over 5 years

I've seen jsPlumb in action on the fantastic Python Tutor site, so it may be worth a try (haven't actually tried it yet). It is open-source, available under the MIT license. (Ignore the “upselling” on the website unless you need it.)
John Henckel over 4 years

Here is a pen that shows how to modify the arrow start/end codepen.io/jdhenckel/pen/NWWrXqr
ashleedawg almost 4 years

Thanks... but I'm a little OCD and your arrowhead is lop-sided and the reference point is in the middle of the arrowhead (instead of at the tip of the arrow). ;-)
superjos over 2 years

yes, quite fit for the purpose. Sadly it does not work out-of-the-box with create-react-app (github.com/anseki/leader-line/issues/12)
Jerome Provensal over 2 years

Sorry to hear that @superjos. My usage was to create a simple static page that worked flawlessly.