当div1和div2在同一行时连接线被隐藏

Question

there are 2 divs, box1 and box2 and are connected by .line . 有2个div，box1和box2并通过.line连接。 Connection line is working fine when 'box1' in left of box2 or box1 in right of 'box2'.However, if both are in same line(one in top and other one on bottom) line is removed ! 连接线工作正常时，“BOX1”左的box2或box1在box2'.However的”权利，如果两者在同一条线上（一个在顶部，另一个在底部）行被删除！

why connection line is removed when divs in same line ? 为什么在同一行中的div时删除连接线？

 $(function () { $('.box').draggable().on('drag', function () { var x1 = $('.box1').position().left; var y1 = $('.box1').position().top; var x2 = $('.box2').position().left; var y2 = $('.box2').position().top; if (x1 > x2) { var x3 = x1; var y3 = y1; x1 = x2; y1 = y2; x2 = x3; y2 = y3; } if (x1 == x2 ) { $('.line').css({ height: Math.abs(y2 - y1), left: x1 + ($('.box1').width() / 2), width: 1, '-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-ms-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)', 'zoom': 1 }); } else { // else calculate angle and rotate line var a = (y2 - y1) / (x2 - x1); var radians = Math.atan(a); var degrees = radians * (180 / Math.PI); $('.line').css({ top: y1 + ($('.box1').height() / 2), left: x1 + ($('.box1').width() / 2), width: Math.abs(x2 - x1), height: 1, 'transform-origin': '0 0', '-webkit-transform': 'rotate(' + degrees + 'deg)', '-moz-transform': 'rotate(' + degrees + 'deg)', '-ms-transform': 'rotate(' + degrees + 'deg)', '-o-transform': 'rotate(' + degrees + 'deg)', 'transform': 'rotate(' + degrees + 'deg)', 'zoom': 1 }); } }); });

 .box{ draggable:true; position:absolute; width:100px; height:100px; background:red; cursor:move; } .box1{ top:25px; } .box2{ left:200px; } .line{ height:1px; width:1px; background:blue; position:absolute; -moz-transform-origin:0% 0%; -webkit-transform-origin:0% 0%; transform-origin:0% 0%; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <form id="form1" runat="server"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="line"></div> </form> </body>

Answer 1

You need to calculate distance between 1 points using both axles now only by X in your case when x1 != x2: 现在，在x1！= x2的情况下，只需要使用X计算两个轴在1点之间的距离：

http://www.mathwarehouse.com/algebra/distance_formula/index.php http://www.mathwarehouse.com/algebra/distance_formula/index.php

In JS: 在JS中：

Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2))

 $(function () { $('.box').draggable().on('drag', function () { var x1 = $('.box1').position().left; var y1 = $('.box1').position().top; var x2 = $('.box2').position().left; var y2 = $('.box2').position().top; if (x1 > x2) { var x3 = x1; var y3 = y1; x1 = x2; y1 = y2; x2 = x3; y2 = y3; } if (x1 == x2 ) { $('.line').css({ height: Math.abs(y2 - y1), left: x1 + ($('.box1').width() / 2), width: 1, '-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-ms-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)', 'zoom': 1 }); } else { // else calculate angle and rotate line var a = (y2 - y1) / (x2 - x1); var radians = Math.atan(a); var degrees = radians * (180 / Math.PI); $('.line').css({ top: y1 + ($('.box1').height() / 2), left: x1 + ($('.box1').width() / 2), width: Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)), height: 1, 'transform-origin': '0 0', '-webkit-transform': 'rotate(' + degrees + 'deg)', '-moz-transform': 'rotate(' + degrees + 'deg)', '-ms-transform': 'rotate(' + degrees + 'deg)', '-o-transform': 'rotate(' + degrees + 'deg)', 'transform': 'rotate(' + degrees + 'deg)', 'zoom': 1 }); } }); });

 .box{ draggable:true; position:absolute; width:100px; height:100px; background:red; cursor:move; } .box1{ top:25px; } .box2{ left:200px; } .line{ height:1px; width:1px; background:blue; position:absolute; -moz-transform-origin:0% 0%; -webkit-transform-origin:0% 0%; transform-origin:0% 0%; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <form id="form1" runat="server"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="line"></div> </form> </body>

当div1和div2在同一行时连接线被隐藏

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-07-25 05:22:25

当div1和div2在同一行时连接线被隐藏

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-07-25 05:22:25

解决方案1
0 已采纳 2017-07-25 05:22:25