El ejemplo de cuadrículas div.
<div class="gameBoard"> <div class="grid">1</div> <div class="grid">2</div> <div class="grid">3</div> <div class="grid">4</div> <div class="grid">5</div> <div class="grid">6</div> <div class="grid">7</div> <div class="grid">8</div> <div class="grid">9</div> <div class="grid">10</div> </div>Entonces, si se pasa el cursor sobre la cuadrícula con el 1, quiero apuntar a la que tiene 2,3,4 y hasta 5 como máximo.
Si el usuario está arrastrando el destructor de barcos/submarino, quiero apuntar al div actual y al siguiente div.
si el barco es un crucero, el div actual más los dos div siguientes. si el barco es un acorazado, el div actual más los siguientes tres div. si el barco es un portaaviones, el div actual más los cuatro div siguientes.
const grids = document.querySelectorAll('.grid');
grids.forEach(el => { el.addEventListener('dragenter', (e) => { // Find the next few dom elements that comes after e.target }); });Las cuadrículas aquí representan una cuadrícula de 10 * 10 en el dom que son solo divs. Cuando paso el mouse sobre ciertos divs, quiero poder obtener los siguientes divs que vienen después del div actual. Intenté más cercano () pero eso no funciona en esta situación particular.
Lo que estoy tratando de hacer es usar arrastrar y soltar para colocar barcos en mi cuadrícula. Entonces, si el usuario está arrastrando el "destructor" o el "submarino", quiero poder obtener el e.target actual y los siguientes divs. Si el usuario está arrastrando el "Portador", quiero poder obtener el e.target actual y los siguientes cuatro divs porque el tamaño del portador es 5.
Puede usar el índice y obtener los siguientes elementos en la matriz
const cells = Array.from(document.querySelectorAll('.cell')); cells.forEach((el, index) => { el.addEventListener('click', (evt) => { const nextSiblings = cells.slice(index+1); console.log(nextSiblings); }); }); .cell { display: inline-block; width: 25px; height: 25px; border: 1px solid black; } <div class="my-grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>O puedes usar métodos DOM
const grid = document.querySelector(".grid"); grid.addEventListener("click", e => { let cell = e.target.closest(".cell"); if (!cell) return; const siblings = []; while (cell = cell.nextElementSibling) { siblings.push(cell); } console.log(siblings); }); .cell { display: inline-block; width: 25px; height: 25px; border: 1px solid black; } <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>Usado nextSiblingElement
grids.forEach(el => { el.addEventListener('dragenter', (e) => { //if (currentShipLength === 2) { const one = e.target; const two = e.target.nextElementSibling; const three = two.nextElementSibling; const four = three.nextElementSibling; const five = four.nextElementSibling; console.log(one, two, three, four, five); //}; }); });