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

Question

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

javascripthtmlcssdraggableintersection-observer

3

我有两个带有类.panel的元素。它们可以有一个额外的类.panel--expanded。我还有一个可拖动的元素。我想做的是检测可拖动元素是否与没有.panel--expanded类的面板元素重叠。我尝试使用IntersectionObserver解决这个问题。我期望的是，当我将root设置为没有扩展类的面板时，如果拖动到没有扩展类的面板上，目标回调应该抛出警报。另一方面，如果我将其拖到具有扩展类的面板上，则不应抛出警报。似乎我从IntersectionObserver的工作方式中误解了某些东西。使用它是可能的吗，还是我错过了什么？目前，在两种情况下都没有警报出现。

这是我的代码片段：

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>

- webta.st.ic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- majusebetter · Accepted Answer

我认为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>