Tengo dos elementos con la clase .panel . Pueden tener una clase adicional .panel--expanded . También tengo un elemento, que se puede draggable . Lo que quiero hacer es detectar si el elemento que se puede arrastrar se superpone al elemento del panel sin la clase .panel--expanded . Traté de resolver esto con IntersectionObserver . Lo que esperaba era que, cuando configuré la root como el panel sin la clase expandida, la devolución de llamada de destino debería lanzar la alerta, si se arrastra sobre el panel sin la clase expandida. Por otro lado, no debería arrojar la alerta, si la arrastro sobre el panel con la clase expandida. Parece que entendí algo mal sobre cómo funciona IntersectionObserver . ¿Es posible con eso, o me perdí algo? De momento no aparece ninguna alerta en ambos casos.
Aquí está mi fragmento:
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>Creo que IntersectionObserver no es la herramienta adecuada para esta tarea, ya que el elemento que se arrastra es una representación visual del elemento de origen creado por el navegador, es decir, el elemento real permanece en su posición actual. Es por eso que no hay intersección detectada por el observador.
Podría usar el controlador de eventos ondragover en su(s) nodo(s) para detectar la intersección, así:
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>