我有两个带有类
.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>