当div1和div2在同一行时隐藏连接线
问题描述：
有2个div，box1和box2，并通过.line连接。当'box1'在box2左边或box1在'box2'右边时，连接线正常工作。但是，如果两者在同一行（一个在顶部，另一个在底部），则线被移除！当div1和div2在同一行时隐藏连接线
为什么在同一行的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>
答
你需要在你的情况下，使用两个车轴现在只能通过X 1点之间来计算距离时，X1 = X2：
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>
哪里是你的代码？你需要在你的问题中有一个[mcve] – j08691
@ j08691代码被添加到问题中。 – Saif
预期的行为是什么？这条线并不总是精确地绘制在每个方格的中心，这不仅发生在一个位于另一个之上的情况下。 – Codeicus