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

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

连接两个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 5426
效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接 效果图： 1.产品经理提出的需求 用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。 至于箭头,...
html 自动连线,基于html5二个div 连线
weixin_35730901的博客
06-02 748
HTML>body{margin:0px;padding:0px;}canvas{border:1pxsolid#9C9898;}Ext.onReady(function(){/**自动判断顶点连线算法*/varstage=newKinetic.Stage({container:'container',1000,height:1000});varlayer=newKin...
使用一条带箭头的虚线连接两个div，并且div拖拽时保持虚线连接
Destinynever的博客
03-12 4143
1.如何使用带箭头的虚线将div连接 a.了解path命令 我们可以使用svg的path配合marker属性来实现，首先我们需要了解path元素的命令 M(x,y) 起始位置的坐标 L(x,y) 结束位置的坐标 <!-- 从 坐标(150,0) ~ (300,300) --> <!-- <path d="M 150,0 L 300,300" style="stroke: red ;stroke-widt...
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 任意两个div之间连线
qq_34811855的博客
07-12 526
【代码】vue 任意两个div之间连线。
两个div间创建连线
weixin_43179300的博客
11-25 5499
效果： <!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
vue 拖拽产生连线_连接两个div的直线，拖动时保持连线。
weixin_39745345的博客
02-22 6442
效果：连接两个div带箭头的虚线，拖动div时保持线条实时改变位置保持始终连接效果图：1.产品经理提出的需求用带箭头的虚线将两个位置不固定的div连接起来,初听到这个需求一头雾水，传统的div可以做直线，但斜起来不太好做，幸亏之前接触过svg,里面有一个line标签，知道起始中止两个点的位置，就可以将两个点连接起来了。至于箭头,可以这么做先定义箭头：将箭头放在直线上：marker-end="url...
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。...4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
vue 流程图，拖拽创建 可以画箭头连接元素
01-09
在“vue 流程图，拖拽创建 可以画箭头连接元素”的项目中，我们看到开发者使用Vue来实现了一个交互式的流程图应用。这个应用允许用户通过拖拽方式创建流程图，并使用线条连接各个元素，这样的功能对于业务流程分析、...
jsPlumb官方插件含demo（1.6.2）div拖拽连线
07-06
jsPlumb的官方包，就不做多余解释，官方说明http://jsplumbtoolkit.com/apidocs/，可以用来拖拽方式实现div排列和连线，是一个绘制流程图的绝佳插件。
vue 拖拽产生连线_使用vue+vis.js实现关系图的任意拖拽，编辑等功能
weixin_36035466的博客
01-17 2253
步骤根据官网，进行安装(旧版)npm install vis(旧版)npm install vis-network(新版)装好之后，在main.js(获取其他名称，入口的js文件即可引入vis的css)import 'iview/dist/styles/iview.css'在关系图的页面引入visimport Vis from 'vis'html中定义容器在script中，定义所需变量，这里需要注...
实现两个div的连线功能
热门推荐
JYHliling的博客
04-04 1万+
思路： 1、得到两个div的某个连接点坐标； 2、判断是否在一条线上，分三种情况求出连线长度： （1）x轴坐标相同；连线长度为x轴坐标差 （2）y轴坐标相同；连线长度为y轴坐标差 （3）坐标都不同，利用勾股定理算出两个坐标连线的距离，以起点为中心旋转响应的角度值 3、在页面上拼接响应的连线div，也可利用canvas画线 //此方法根据具体的需求更改，传进两个div对象，分别得到di...
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 667
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-...
html中div不在同一条直线上,html – 插入两个嵌套div之间的垂直分隔线,不是全高...
weixin_39737947的博客
06-04 150
我有浮动左和浮动右< div>嵌套在浅蓝色框div中，如下图所示。我不知道如何在它们之间插入一条垂直线(如下图所示：http://screencast.com/t/0bRNOmjeE，因为我的sub-10声誉，所以SO不会让我嵌入)具有以下属性：1)我可以控制或看起来合理的任何一侧的填充/边距(即，与其他div不太接近一个div)2)如图所示留下上方和下方的边缘，即不延伸浅蓝色div的...
前端小技巧之div标签连线
yunduanaoligei的博客
11-09 3088
今天分享下”前端小技巧之div标签连线“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。 往常我们画一条横线直接用标签即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下
html多个div之间连线,绘制两个元素之间的连接线
weixin_35916466的博客
06-11 5189
几天前我也有同样的要求我使用了一个完整的宽度和高度svg并将其添加到我的所有div下面，并动态地为这些svg添加了行。使用svg查看我在这里的表现HTMLControlLibraryControlAControlBControlCControlDvarwidth=parseInt($(this).parent().css('width'));if(width==10){$(th...
设置两个div之间的距离
最新发布
09-11
设置两个div之间的距离通常可以通过CSS来实现，有几种常用的方法可以调整div之间的空间： 1. **使用`margin`属性**：这是最直接的方法，可以给其中一个div设置外边距（margin），从而与另一个div产生距离。 ```css .div1 { margin-bottom: 20px; /* 向下外边距，可以是px, em等单位 */ } ``` 2. **使用`padding`属性**：如果希望在div内部增加空间，可以使用`padding`属性。但这通常会增加div本身的大小，而不是创建两个div之间的距离。 3. **使用`margin`属性的负值**：在某些布局中，可以使用负的外边距来重叠div，但这通常用于特殊的布局设计，不推荐用于常规的增加距离。 4. **使用`position`属性**：通过给div设置定位属性，比如`position: relative;`，然后使用`top`、`left`、`right`、`bottom`属性来控制两个div之间的位置关系。 ```css .div1 { position: relative; margin-right: 20px; /* 为div1设置向右的外边距 */ } .div2 { position: relative; left: 20px; /* 相对于div1的位置向右偏移20px */ } ``` 5. **使用Flexbox或Grid布局**：这些现代布局方式提供了更灵活的方式来控制元素之间的间距，而且对于响应式设计特别有用。 ```css /* 使用Flexbox */ .container { display: flex; justify-content: space-between; /* 在flex容器中的项目之间创建空间 */ } .div1, .div2 { flex: 1; /* 让两个div占据相等的空间 */ } ``` 选择哪种方法取决于具体的布局需求和个人偏好。在实际操作中，通常会结合多种CSS属性来达到设计要求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值