CODEWITHSUNDEEP
javascripthtmlcsscanvas
Alexander P
Alexander P

Reputation: 835

Draw an arrow between two divs

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:

http://i.imgur.com/iktvmLK.png

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 )

Upvotes: 58

Views: 83622

Answers (7)

Jerome Provensal
Jerome Provensal

Reputation: 1057

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.

enter image description here

Upvotes: 37

Sebastian Norr
Sebastian Norr

Reputation: 8838

I recommend using this:
https://www.cssscript.com/connect-elements-directional-arrow/
Very simple to use :)

You can do this then:

<connection from="#id_1" to="#id_2" color="red" tail></connection>

How to include it:

You extract the .zip file to your projects folder. Either copy over the CSS & JavaScript to your project, or add a reference to those files in your project:

<head>
        <!-- Your head-codes here -->
        <link rel  = "stylesheet" type = "text/css" href = "../plugins/domarrow.js-master/domarrow.css"/>
</head>
<body>
    <!-- Your body-codes here -->
    <script src="../plugins/domarrow.js-master/domarrow.js"></script>
</body>

In my case the file structure is:

C/MyProject/:.
│
├───css
│       start.css
│
├───html
│       start.html <--- write here
│
├───js
│       start.js
│
└───plugins
    │
    └───domarrow.js-master
            domarrow.css
            domarrow.js

That's why I need the "../" in the beginning of the relative path, it means "step out one level", so for example: "../plugins" exits the "html" folders & goes into the "plugins" folder instead.

Adjust the file-path according to your file layouts.

Upvotes: 1

Red
Red

Reputation: 160

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>

Upvotes: 11

Joshua Pinter
Joshua Pinter

Reputation: 47561

Canvas and jCanvas

Based on your needs, you should definitely check out using Canvas and the jCanvas library. It makes things like this a breeze.

I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality. This really kicks open the doors without adding code complexity.

Hope that helps others, like me.

JP

EDIT 2017 05 20:

I used to have an example here that linked to the jCanvas' sandbox with all the code you needed to draw an arrow between two elements and drag both of those elements around the canvas. However, that link no longer works and I don't have the code anywhere else.

So, I still think you should check out jCanvas but unfortunately I don't have any sample code to start you off.

Upvotes: 0

c69
c69

Reputation: 21517

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

Upvotes: 2

markE
markE

Reputation: 105035

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>

Upvotes: 55

user887958
user887958

Reputation:

Its fairly simple to create the arrow head. See this example on CSS Tricks. Maybe using this inside a container which has the arrow line might do it.

Upvotes: 0

Related Questions