连接两个div的直线，拖动时保持连线

最新推荐文章于 2025-03-18 14:00:24 发布
最新推荐文章于 2025-03-18 14:00:24 发布
阅读量2.6k 收藏 6
点赞数
分类专栏： 杂记 文章标签： css js svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_36617251/article/details/111769702
版权
本文介绍如何通过CSS和JS结合SVG，实现在两个可拖动div间创建带箭头的虚线连接，并在div拖动时保持连线实时更新。首先利用SVG的line标签和marker-end属性绘制连接线和箭头，然后计算两个div的相对位置，根据位置调整连接线的起点和终点，确保在div拖动时连线始终保持连接状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

连接两个div的直线，拖动时保持连线。

效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接

效果图：
图片描述

1.产品经理提出的需求

用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。
至于箭头,可以这么做先定义箭头：

      <svg>
          <defs>
              <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
最低0.47元/天 解锁文章
连接两个div的直线，拖动时保持连线。
weixin_34224941的博客
11-09 5699
效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接 效果图： 1.产品经理提出的需求 用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。 至于箭头,...
vue 拖拽产生连线_连接两个div的直线，拖动时保持连线。
weixin_39745345的博客
02-22 6827
效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接效果图：1.产品经理提出的需求用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。至于箭头,可以这么做先定义箭头：将箭头放在直线上：marker-end="url...
DIV+JS画图,DIV与DIV之间的连线!
11-15
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法： var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
vue中，使用canvas进行两个（多个）元素直接的连线
最新发布
zww2446的博客
03-18 273
需要注意canvas的宽高，如果宽高有问题的话可能导致连接线的位置有问题。以下是简易的一个例子，大家可以在这个基础上完成更加复杂的功能。
两个div间创建连线
weixin_43179300的博客
11-25 6024
效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &lt
实现两个div的连线功能
热门推荐
JYHliling的博客
04-04 1万+
思路： 1、得到两个div的某个连接点坐标； 2、判断是否在一条线上，分三种情况求出连线长度： （1）x轴坐标相同；连线长度为x轴坐标差 （2）y轴坐标相同；连线长度为y轴坐标差 （3）坐标都不同，利用勾股定理算出两个坐标连线的距离，以起点为中心旋转响应的角度值 3、在页面上拼接响应的连线div，也可利用canvas画线 //此方法根据具体的需求更改，传进两个div对象，分别得到di...
vue 任意两个div之间连线
qq_34811855的博客
07-12 1611
【代码】vue 任意两个div之间连线。
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。...4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
vue 流程图，拖拽创建 可以画箭头连接元素
01-09
在“vue 流程图，拖拽创建 可以画箭头连接元素”的项目中，我们看到开发者使用Vue来实现了一个交互式的流程图应用。这个应用允许用户通过拖拽方式创建流程图，并使用线条连接各个元素，这样的功能对于业务流程分析、...
jsPlumb官方插件实现div拖拽连线绘流程图
- **连接器(Connections)**：定义了两个锚点之间的连线风格，如直线、曲线等。 - **悬浮提示(Hover Painting)**：当鼠标悬停在目标元素上时，动态地显示连接点。 - **分组(Grouping)**：可以将多个元素分组管理，...
使用一条带箭头的虚线连接两个div，并且div拖拽时保持虚线连接
Destinynever的博客
03-12 4507
本文介绍了使用SVG实现div之间带箭头虚线连接的方法。首先讲解了SVG path命令(M,L,H,V,C)绘制直线和曲线，通过stroke-dasharray属性创建虚线效果。然后详细说明了marker属性实现箭头的配置方法，包括markerWidth/Height、refX/refY等参数。接着介绍了鼠标坐标(clientX/Y,screenX/Y,offsetX/Y)的差异，以及实现div拖动的步骤。最后展示了如何动态更新path路径，使连接线始终保持在两个div的中心位置，并根据div相对位置自动调
jsPlumb官方插件含demo（1.6.2）div拖拽连线
07-06
jsPlumb的官方包，就不做多余解释，官方说明http://jsplumbtoolkit.com/apidocs/，可以用来拖拽方式实现div排列和连线，是一个绘制流程图的绝佳插件。
html 自动连线,基于html5二个div 连线
weixin_35730901的博客
06-02 843
HTML>body{margin:0px;padding:0px;}canvas{border:1pxsolid#9C9898;}Ext.onReady(function(){/**自动判断顶点连线算法*/varstage=newKinetic.Stage({container:'container',1000,height:1000});varlayer=newKin...
html多个div之间连线,绘制两个元素之间的连接线
weixin_35916466的博客
06-11 5496
几天前我也有同样的要求我使用了一个完整的宽度和高度svg并将其添加到我的所有div下面，并动态地为这些svg添加了行。使用svg查看我在这里的表现HTMLControlLibraryControlAControlBControlCControlDvarwidth=parseInt($(this).parent().css('width'));if(width==10){$(th...
QWidget的大小和位置
枫影竹韵的博客
10-26 1万+
1.获取 2. 设置 在控件显示( .show())之前，系统不确定是否会包装窗口框架。所以，在控件显示( .show())之前，用setGeometry()设置用户区域的坐标时，就会把窗口框架的坐标设置成(x_noFrame, y_noFrame)。 注意：setGeometry()在控件显示( .show())后设置更好。 举例： window = QWidget() window.move(500, 500);//设置位置 win...
Struts2学习（三）-----path链接一定要用绝对路径
wangdongli_1993的博客
07-16 705
struts.xml文件 &lt;?xml version="1.0" encoding="UTF-8" ?&gt; &lt;!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-...
前端小技巧之div标签连线
yunduanaoligei的博客
11-09 3292
今天分享下”前端小技巧之div标签连线“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。 往常我们画一条横线直接用标签即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下
html中div不在同一条直线上,html – 插入两个嵌套div之间的垂直分隔线,不是全高...
weixin_39737947的博客
06-04 180
我有浮动左和浮动右< div>嵌套在浅蓝色框div中，如下图所示。我不知道如何在它们之间插入一条垂直线(如下图所示：http://screencast.com/t/0bRNOmjeE，因为我的sub-10声誉，所以SO不会让我嵌入)具有以下属性：1)我可以控制或看起来合理的任何一侧的填充/边距(即，与其他div不太接近一个div)2)如图所示留下上方和下方的边缘，即不延伸浅蓝色div的...
css实现两个div之间的竖杠
qq_45991812的博客
09-26 1424
注： 外层div flex布局；里面的span flex=1 ，通过line-height可以控制那个竖杠的高度。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值