Draw an arrow between two divs
Question
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 )
7 answers
solution1
48 ACCPTED 2013-11-18 03:11:27
You might consider SVG.
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>
solution2
9 2018-02-17 04:29:42
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>
solution3
4 2013-11-17 23:59:05
使用库，如JSPlumb ： https : //jsplumbtoolkit.com/
solution4
0
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.
solution5
0 2015-06-10 19:38:01
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.
solution6
0 2021-09-07 21:35:45
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.
solution7
0 2021-10-17 01:25:11
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.