如何使用javascript在拖放中停止div的重叠

var draggableDiv = document.getElementById("draggable");

draggableDiv.addEventListener("drag", function(event) {
  // 更新div元素的位置
  draggableDiv.style.left = event.clientX + "px";
  draggableDiv.style.top = event.clientY + "px";
});

var draggableDiv = document.getElementById("draggable");
var otherDiv = document.getElementById("other");

draggableDiv.addEventListener("drag", function(event) {
  // 更新div元素的位置
  draggableDiv.style.left = event.clientX + "px";
  draggableDiv.style.top = event.clientY + "px";
  
  // 检测是否与其他div元素重叠
  if (isOverlap(draggableDiv, otherDiv)) {
    // 如果重叠，调整div元素的位置
    draggableDiv.style.left = "0px";
    draggableDiv.style.top = "0px";
  }
});

function isOverlap(element1, element2) {
  var rect1 = element1.getBoundingClientRect();
  var rect2 = element2.getBoundingClientRect();
  
  return !(rect1.right < rect2.left || 
           rect1.left > rect2.right || 
           rect1.bottom < rect2.top || 
           rect1.top > rect2.bottom);
}