JS+JQ+SVG实现两点拖拽中间有连接线

最新推荐文章于 2023-08-11 17:37:24 发布
最新推荐文章于 2023-08-11 17:37:24 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： js jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38152494/article/details/108513410
版权
js 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
jq
3 篇文章 0 订阅
订阅专栏

效果图如下
在这里插入图片描述

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            position: relative;
            width: 640px;
            height: 480px;
            margin: 0 auto;
            background: yellow;
        }

        svg {
            position: absolute;
            left: 0;
            top: 0;
            /*z-index: 1;*/
        }

        .wrapper img {
            user-select: none;
        }

        #box {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #ff21d1;
        }

        #boxPosition {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: red;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
    <svg width="100%" height="100%" style="position: absolute;" id="svg">
    </svg>
    <div id="boxPosition"></div>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
    
    function drawSvg() {
        var startX = $('#boxPosition').position().left+$('#boxPosition').width()/2;
        var startY = $('#boxPosition').position().top+$('#boxPosition').height()/2;
        var endX = $('#box').position().left+$('#boxPosition').width()/2;
        var endY = $('#box').position().top+$('#boxPosition').height()/2;
        var r = $('#boxPosition').width()/2; //半径
        var angle1='',angle2 = '';
        if(Math.sqrt((endX - startX)*(endX - startX)+(startY - endY)*(startY - endY))<=100){
          document.querySelector("#svg").innerHTML = ' ';
          return false
        }else if(endX > startX && endY <startY){  //右上角
          var catheti1 = endX - startX;
          var catheti2 = startY - endY;
          var hypotenuse = Math.sqrt(catheti1*catheti1 +catheti2*catheti2);
          var sinx1_start = catheti2/hypotenuse;
          var cosx1_start = catheti1/hypotenuse;
          var x_start = r*2*cosx1_start;
          var y_start = r*2*sinx1_start;
          var sinx1_end = catheti1/hypotenuse;
          var cosx1_end = catheti2/hypotenuse;
          var x_end = r*2*sinx1_end;
          var y_end = r*2*cosx1_end;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX+x_start},${startY-y_start} L ${endX-x_end},${endY+y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX < startX && endY < startY){   //左上角
          var catheti1 = startX - endX;
          var catheti2 = startY - endY;
          var hypotenuse = Math.sqrt(catheti1*catheti1 +catheti2*catheti2);
          var sinx1_start = catheti2/hypotenuse;
          var cosx1_start = catheti1/hypotenuse;
          var x_start = r*2*cosx1_start;
          var y_start = r*2*sinx1_start;
          var sinx1_end = catheti1/hypotenuse;
          var cosx1_end = catheti2/hypotenuse;
          var x_end = r*2*sinx1_end;
          var y_end = r*2*cosx1_end;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX- x_start},${startY-y_start} L ${endX+x_end},${endY+y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX > startX && endY > startY){  //右下角
          var catheti1 = endX - startX ;
          var catheti2 = endY - startY;
          var hypotenuse = Math.sqrt(catheti1*catheti1 +catheti2*catheti2);
          var sinx1_start = catheti2/hypotenuse;
          var cosx1_start = catheti1/hypotenuse;
          var x_start = r*2*cosx1_start;
          var y_start = r*2*sinx1_start;
          var sinx1_end = catheti1/hypotenuse;
          var cosx1_end = catheti2/hypotenuse;
          var x_end = r*2*sinx1_end;
          var y_end = r*2*cosx1_end;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX + x_start},${startY+y_start} L ${endX-x_end},${endY-y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX < startX && endY > startY){  //左下角
          var catheti1 =  startX - endX
          var catheti2 = endY - startY;
          var hypotenuse = Math.sqrt(catheti1*catheti1 +catheti2*catheti2);
          var sinx1_start = catheti2/hypotenuse;
          var cosx1_start = catheti1/hypotenuse;
          var x_start = r*2*cosx1_start;
          var y_start = r*2*sinx1_start;
          var sinx1_end = catheti1/hypotenuse;
          var cosx1_end = catheti2/hypotenuse;
          var x_end = r*2*sinx1_end;
          var y_end = r*2*cosx1_end;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX - x_start},${startY+y_start} L ${endX+x_end},${endY-y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX > startX && endY == startY){  //右侧水平
          var x_start = startX+r*2;
          var y_start = startY;
          var x_end = endX - r*2;
          var y_end = endY;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX < startX && endY == startY){  //左侧水平
          var x_start = startX - r*2;
          var y_start = startY;
          var x_end = endX + r*2;
          var y_end = endY;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX == startX && endY < startY){  //上侧水平
          var x_start = startX;
          var y_start = startY - r*2;
          var x_end = endX;
          var y_end = endY + r*2;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else if(endX == startX && endY < startY){  //下侧水平
          var x_start = startX;
          var y_start = startY + r*2;
          var x_end = endX;
          var y_end = endY - r*2;
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

        }else{
          document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX},${startY} L ${endX},${endY}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`
        }
        
    }

    $(document).on('click','#box',function(e){
      e.stopPropagation();
      return false;
    })

  $('.wrapper svg').on('click', function (e) {
        var left = e.offsetX;
        var top = e.offsetY;
          $('.wrapper').find('#box').remove();
          $('.wrapper').append(`<div id="box" style="left:${left - 25}px;top:${top - 25}px"></div>`);
          move();
          drawSvg()
    })
    function move() {
        // 获取元素和初始值
        var oBox = document.getElementById('box'), disX = 0, disY = 0;
        // 获取浏览器可见区域宽高，div宽高
        var browserWidth = document.getElementById('wrapper').offsetWidth,
            browserHeight = document.getElementById('wrapper').offsetHeight,
            boxWidth = document.getElementById('box').offsetWidth,
            boxHeight = document.getElementById('box').offsetHeight;
        // 容器鼠标按下事件
        oBox.onmousedown = function (e) {
            var e = e || window.event;
            // 鼠标相对于div左侧位置
            disX = e.clientX - this.offsetLeft;
            disY = e.clientY - this.offsetTop;
            document.onmousemove = function (e) {
                var e = e || window.event;
                oBox.style.left = (e.clientX - disX) + 'px';
                if ((e.clientX - disX) <= 0) {
                    oBox.style.left = 0;
                } else if ((boxWidth - disX + e.clientX) >= browserWidth) {
                    oBox.style.left = browserWidth - boxWidth + "px";
                }
                oBox.style.top = (e.clientY - disY) + 'px';
                if ((e.clientY - disY) <= 0) {
                    oBox.style.top = 0;
                } else if ((boxHeight - disY + e.clientY) >= browserHeight) {
                    oBox.style.top = browserHeight - boxHeight + "px";
                }
                drawSvg()
            };

            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };
    }

</script>
</body>
</html>
下一页继续
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS在两个（或更多）元素之间绘制线或带箭头的线
记录美好生活
03-22 394
JS在两个（或更多）元素之间绘制线或带箭头的线 svg实现
使用js实现楼层跳跃
Evan_QB的博客
09-06 2640
html代码如下:   &lt;ul&gt; &lt;li&gt;鞋子区域&lt;/li&gt; &lt;li&gt;袜子区域&lt;/li&gt; &lt;li&gt;裤子区域&lt;/li&gt; &lt;li&gt;裙子区域&lt;/li&gt; &lt;li&amp
svg图的操作和拖动
......
07-07 1332
SVG 有如下特点：SVG 绘制的是矢量图，因此对图像进行放大不会失真。基于 XML，可以为每个元素添加 JavaScript 事件处理器。每个图形均视为对象，更改对象的属性，图形也会改变。**SVG 画布的预定义元素里，有六种基本图形跟一种比较特殊，也是功能最强的元素：六种基本图形：矩形。
使用svg标签 解决实现图片的放大，缩小，和拖拽效果的问题。
最新发布
jdhrucn的博客
08-11 3132
viewBox的前两个属性是截图框的位置，而后面的两个属性是”截图框“的大小。只要后面监听鼠标的滚动事件，向上就是把viewBox的后两个属性变小就会实现放大效果，线下就是把viewBox的后两个属性变大。拖拽的实现只需要改变我们的viewBox前两个属性就可以了，viewBox的第一个属性是svg框的距离图片左上角的x，第二个是y。A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ，距离最上边那就是第二个属性y。1.首先我们要实现放大，缩小，和拖拽的前提是把图片利用svg显示。
svg拖拽rect,line,circle
anlin9217的博客
07-25 431
window.onload = function(){ var height = 400,width = 900; var rectWidth = 150,rectHeight = 150; var mySvg = d3.select('#main').append("svg") .attr('height',height).attr('width',width).attr(...
SVG图形拖动功能的实现
热门推荐
u013905744的专栏
01-22 1万+
SVG图形拖动功能的实现
svg实现多个元素拖拽
qq_45128278的博客
12-06 827
<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态添加图形和图片并可以拖拽</title> <meta content="width=device-width;initial-scale=1"> <scr...
JavaScript+css+svg 实现简单的图片编辑器
07-04
JavaScript+css+svg 实现简单点图片编辑器，这里是引用了原作者的git项目：https://github.com/dengzemiao/DZMDrawingBoard-WebSvg，样式简单进行了美化。
JS+CSS3+SVG实现的七巧板拼成自行车动画效果源码.zip
11-01
这是一个基于JavaScript、CSS3和SVG技术实现的七巧板拼成自行车动画效果的源码项目。这个项目展示了如何利用这三种强大的Web开发技术来创建一个动态、交互式的视觉展示。以下是对这些技术及其在该项目中应用的详细...
CSS3+SVG实现的时间沙漏动画特效特效代码
03-20
CSS3+SVG实现时间沙漏特效是一款逼真的时间漏斗CSS3动画特效代码，可自动翻转，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）
01-09
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
使用 svg 实现拖拽效果
12-11
在svg中实现组件拖动效果，完整的DEMO，可使用浏览器直接打开浏览
JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip
11-19
在本资源中，"JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip"，我们探讨的是一个结合JavaScript（JS）、CSS3和SVG技术来创建的交互式3D动画效果。这个特效使得图形元素能够根据鼠标的位置进行动态的3D变换...
jQuery+SVG实现的页面弹出窗口动画特效特效代码
03-20
jQuery+SVG实现的页面弹出窗口动画特效源码是一段实现了点击按钮后动画弹出页面窗口效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀...
python画流程图模块 节点拖动_基于Raphael.js实现模拟工作流程图，可以拖拽，连接线自动调整...
weixin_39866963的博客
11-24 385
最近有机会学习了一下RaphaelJS这个js组件，它可以实现类似html5 canvas的图形标签的功能，什么是RaphaelJS?插件描述：Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意...
svg中实现元素拖动
qingwazange的博客
07-24 9398
这段时间比较忙，php的设计模式想写工厂模式，但是比较难写，不是一时半会儿能写完的，先把现在正在使用的关于svg中元素的拖动，记录一下。 借助svg，我们可以画出多种多样的图形，而且利用g标签，还可以把多个标签组合在一起，让他们具有相同的行为。语法也比较简洁，希望还么有接触过的同学，学习一下。 要实现拖动功能（大神绕行…），我们需要给元素定义mousedown(响应鼠标在元素范围按住），
vue 拖拽产生连线_可拖拽生成节点的组织结构图-vue+svg+betterscroll+原生js-drag
weixin_36465618的博客
01-17 1756
查看案例请点击此处：需要源码可联系站长本人。微信18975141930。使用的技术框架：1、原生Svg用来画线2、原生js拖动dragover、dragleave、drop行为3、betterscroll实现画布拖动4、整个底层由vue-cli3实现功能点：1、图形与数组双向互动。树节点有单击、右键单击、删除等行为，可通过console.log查看。2、左侧方案节点可以直接拖到右侧蓝色节点上，添加...
SVG学习之拖拽
jwl_yifeng的专栏
07-17 4108
SVG要实现拖拽功能，主要依靠的是鼠标的mousedown、mouseup和mousemove事件，mousedown按下的时候判断是否选取到SVG元素，并定义变量保存该元素，以备之后用到；mouseup主要是拖拽完之后对事件的处理，例如，我想拖拽完之后将坐标保存到数据库，或是拖拽完之后弹出提示等；mousemove主要是改变选取元素的坐标；图像整体的放大缩小由滚轮操作，不用定义即可实现，
html5 拖拽 编辑 插件,实现HTML5 SVG拖拽的JavaScript库插件
weixin_28977143的博客
07-01 523
svg.draggy.js是一款可以实现拖拽SVG的JavaScript工具库插件。该SVG工具库插件通过简单的设置，就可以实现任何SVG图形的拖拽互动。你可以设置SVG元素的拖动范围和拖动残影效果。使用方法要使用该插件需要在页面中引入svg.js和svg.draggy.js文件。HTML结构你可以使用一个作为SVG元素的容器。初始化插件首先需要在容器中将SVG绘制出来，然后就可以通过draggy...
使用svg+div来画两个长方形中间用箭头线连接
06-07
可以使用以下 HTML、CSS 和 SVG 代码来画两个长方形中间用箭头线连接： ```html ; width: 200px; height: 100px;"> <!-- 第一个长方形 --> <svg viewBox="0 0 100 100" style="position: absolute; left: 20px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值