两个DIVS重叠时保持距离

Question

我有两个 DIVS，html 给出了代码

function collision($div1, $div2) {
 var x1 = $div1.offset().left;
 var y1 = $div1.offset().top;
 var h1 = $div1.outerHeight(true);
 var w1 = $div1.outerWidth(true);
 var b1 = y1 + h1;
 var r1 = x1 + w1;
 var x2 = $div2.offset().left;
 var y2 = $div2.offset().top;
 var h2 = $div2.outerHeight(true);
 var w2 = $div2.outerWidth(true);
 var b2 = y2 + h2;
 var r2 = x2 + w2;

 if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
 return true;
}

window.setInterval(function () {
 $('#result').text(collision($('#div1'), $('#div2')));
 if (collision($('#div1'), $('#div2')) == true) {
  $('#div1').addClass('touch');
  $('#div2').addClass('touch');
  $('#div1,#div2').css();
 }
 if (collision($('#div1'), $('#div2')) == false) {
  $('#div2').addClass("remTouch");
  $('#div1').addClass('remTouch');
 }
}, 200);

$('#div1').draggable();

.touch{
    margin:20px;
    transition: margin 1s;
}
.remTouch{
    margin:-20x;
    transition: margin 1s;
}
#div1 { 
    width: 100px; height: 100px; background-color: pink;
    border-radius: 50%;
    opacity: 0.7;
}
#div2 { 
    width: 200px; height: 200px; background-color: green; 
    border-radius: 50%;
    opacity: 0.7;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<div id="div1"></div>
<br/>
<div id="div2"></div>
    
<p>Colliding? <span id="result">false</span>
    
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

现在的问题是，当我将小 div 移向较大的 div 时，重叠后它会移动，但在错误条件下什么也没有发生，我的意思是当条件为假时我想移动较大的 div回到原位。更具体地说，我希望较大的 div 到运行平滑地远离较小的 div 并保持一点距离。我想像UC浏览器那样做。非常感谢您。

Answer 1

我已经更新了 fiddle。 https://jsfiddle.net/uv4uurzn/3/ JS 变化：

  var newTop =  $('#div1').offset().top + 150;
  var newLeft =  $('#div1').offset().left + 10;
  console.log(newTop);
  $('#div2').css('top', newTop);
  $('#div2').css('left', newLeft);

CSS更新：#div2 { width: 200px; height: 200px; background-color: green; position: fixed; top: 150px; left: 10px; border-radius: 50%; opacity: 0.7; -moz-transition: all 250ms ease-out; -webkit-transition: all 250ms ease-out; }

您可以将div设置为固定位置，并根据需要设置左上角。

两个DIVS重叠时保持距离

Two DIVS keep distance when overlaps each other

javascript

jquery

jquery-ui

css-transitions

uc-browser