當div1和div2在同一行時連接線被隱藏

Question

有2個div，box1和box2並通過.line連接。 連接線工作正常時，“BOX1”左的box2或box1在box2'.However的”權利，如果兩者在同一條線上（一個在頂部，另一個在底部）行被刪除！

為什么在同一行中的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

現在，在x1！= x2的情況下，只需要使用X計算兩個軸在1點之間的距離：

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

在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