0
212
ViewsjQuery: descubre qué elemento está directamente detrás de otro
Estoy creando un pequeño juego de apertura de cajas donde mis usuarios pueden abrir una caja y una rueda giratoria animada se desplaza a lo largo de todos los premios y aterriza en su premio ganador (indicado por la línea negra en el medio en la imagen a continuación)
Después de la animación, se agregan a la página un montón de elementos de caja que representan los premios. Lo que estoy tratando de averiguar es:
Usando jQuery, ¿cómo puedo encontrar en qué cuadro cae la línea negra?
Cualquier ayuda será apreciada, gracias.
ESTRUCTURA HTML
<section class="boxes box-background"> <div class="winning-line" id="line"> </div> <div class="container boxes-container"> <div class="row"> <div class="col-12"> <div class="open-box"> <div id="unbox-area" id="unbox"> <div id="cardList"> <div class="card" id="prize1">...</div> <div class="card" id="prize2">...</div> <div class="card" id="prize3">...</div> //so on </div> </div> </div> </div> </div> </div> </div> </section>PROBLEMA
Actualmente, usando el código a continuación, solo puedo obtener el elemento de "caja abierta", no el elemento de clase de "tarjeta" individual real en el que aterrizó la línea negra.
let blackLineEl = document.getElementById("line"); let rect = blackLineEl.getBoundingClientRect(); let left = rect.x; let originalDisplay = blackLineEl.style.display; blackLineEl.style.display = "none" let winner = document.elementFromPoint(left, 180.0); blackLineEl.style.display = originalDisplay console.log(winner.className);He intentado ajustar la posición superior estática a diferentes valores, pero no tuve suerte.
1 answers
Answer question0
Pruebe el elementFromPoint(x, y) .
Dado que document.elementFromPoint devuelve el elemento superior, deberá configurar temporalmente su arrastrable para mostrar: ninguno o puntero-eventos: ninguno para encontrar elementos debajo de él.
Algo como:
let lineEl = document.getElementById("blackLine") let x = parseFloat(getComputedStyle(lineEl).left) let y = parseFloat(getComputedStyle(lineEl).top) let h = parseFloat(getComputedStyle(lineEl).height) let originalDisplay = getComputedStyle(lineEl).display //hide black line to get element behind it lineEl.style.display = "none" let winningBox = document.elementFromPoint(x, y+0.5*h); lineEl.style.display = originalDisplay // Do something with winningBoxEditar: puede usar la esencia de Mike Abdullah que obtiene todos los elementos en un punto dado