检测拖动的元素是否与另一个重叠

Question

.panel 类有两个元素。他们可以有一个额外的课程.panel--expanded。我还有一个元素，即draggable。我想要做的是检测可拖动元素是否与面板元素重叠没有 .panel--expanded 类。我试图用IntersectionObserver 解决这个问题。我所期望的是，当我将root 设置为没有扩展类的面板时，如果拖动面板没有扩展类，目标回调应该引发警报。另一方面，如果我将它拖到面板上 with 扩展类，它不应该抛出警报。似乎我从IntersectionObserver 的工作方式中理解了一些错误。它甚至有可能，还是我错过了什么？目前，这两种情况都没有出现警报。

这是我的 sn-p：

let target = document.querySelector('.draggable');

let callback = (entries, observer) => {
  entries.forEach(entry => {
     if (entry.isIntersecting) {
       alert('OVERLAPPING!');
     }
  }); 
};

let options = {
  root: document.querySelector('.panel:not(.panel--expanded)')
};

let observer = new IntersectionObserver(callback, options);
observer.observe(target);

.panel {
  background-color: lightblue;
  height: 100px;
  margin: 50px 0px;
  width: 500px;
}

.panel--expanded {
  background-color: coral;
}

.draggable {
  background-color: lightgreen;
  box-shadow: 5px 5px 5px 5px lightgray;
  height: 50px;
  width: 300px;
}

<div class="panel">panel without panel--expanded class</div>
<div class="draggable" draggable="true">draggable element</div>
<div class="panel panel--expanded">panel with panel--expanded class</div>

Answer 1

我认为IntersectionObserver 不是此任务的正确工具，因为被拖动的元素是浏览器创建的源元素的可视化表示 - 即实际元素保持在其当前位置。这就是观察者没有检测到交叉点的原因。

您可以使用节点上的ondragover 事件处理程序来检测交叉点，如下所示：

function handleDrag(event) {
    if (!event.target.classList.contains('.panel--expanded')) {
        console.log('OVERLAPPING!');  
    } 
}

.panel {
  background-color: lightblue;
  height: 100px;
  margin: 50px 0px;
  width: 500px;
}

.panel--expanded {
  background-color: coral;
}

.draggable {
  background-color: lightgreen;
  box-shadow: 5px 5px 5px 5px lightgray;
  height: 50px;
  width: 300px;
}

<div class="panel" ondragover="handleDrag(event)">panel without panel--expanded class</div>
<div class="draggable" draggable="true">draggable element</div>
<div class="panel panel--expanded" ondragover="handleDrag(event)">panel with panel--expanded class</div>