Javascript 两个div重叠时保持距离

我有两个div，其中给出了html代码

函数冲突（$div1，$div2）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | r1r2）返回false；
返回true；
}
window.setInterval（函数（）{
$（'#result'）。文本（冲突（$（'#div1'），$（'#div2'））；
if（冲突（$（'div1'），$（'div2'））==true）{
$（'#div1'）.addClass（'touch'）；
$（'#div2'）.addClass（'touch'）；
$（'#div1，#div2'）.css（）；
}
if（冲突（$（'div1'），$（'div2'））==false）{
$（'#div2'）.addClass（“remTouch”）；
$（'#div1'）.addClass（'remTouch'）；
}
}, 200);
$（'#div1'）.draggable（）
.touch{
利润率：20px；
过渡：边缘1s；
}
雷姆图奇先生{
保证金：-20倍；
过渡：边缘1s；
}
#第1部分{
宽度：100px；高度：100px；背景色：粉色；
边界半径：50%；
不透明度：0.7；
}
#第2部分{
宽度：200px；高度：200px；背景色：绿色；
边界半径：50%；
不透明度：0.7；
}



碰撞？假的
我已经更新了小提琴。
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{
宽度：200px；高度：200px；背景色：绿色；
位置：固定；
顶部：150px；
左：10px；
边界半径：50%；
不透明度：0.7；
-moz转换：所有250ms的放松；
-webkit过渡：所有250ms的缓解；
}

您可以将div设置为固定位置，并根据需要设置左上角。
此代码非常贪婪，可以进行大量优化。现在，每200毫秒，您就会发出一大堆DOM请求，并创建大量的jQuery对象。通过缓存元素（
const$div1=$（'#div1'）
）并重用它们（
$div1.addClass（“…”）
），您将极大地减轻CPU的负担。当然这是个问题，但如果您知道特定问题的任何解决方案，以产生与UC BrowserNo相同的磁效应，我不知道，但是这个有磁性的东西听起来比优化当前代码并使其性能更难实现。如果为true，您可以使用div的当前位置计算所需的新位置，并查看第二个div的端口边界，并设置css top和left属性。例如$（'#div2'）。可拖动（）$（#div2'）.css（'top'，200）$（#div2'）.css（'left'，200）；创建了一把小提琴，@JalalAhmad您可以根据需要修改顶部和左侧@JalalAhmad你可以接受ans，如果它对你有用：）那很好，伙计，谢谢你：）上帝保佑你