Question

有2个div，box1和box2，并由.line连接。＆＃39; box1＆＃39;当连接线正常工作时位于＆＃39; box2＆＃39;右侧的box2或box1左侧。但是，如果两者位于同一行（一个在顶部，另一个在底部），则删除行！

为什么当div在同一行时删除连接线？

＆＃13;

$(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
        });
    }
});
});

＆＃13;

.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%; }

＆＃13;

<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>

＆＃13;

Answer 1

在x1！= x2的情况下，你需要使用两个轴来计算1点之间的距离，现在只计算X：

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

在JS中：

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

＆＃13;

$(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
        });
    }
});
});

＆＃13;

.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%; }

＆＃13;

<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>

＆＃13;

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

1 个答案: