Ограничение области, в которой элемент может быть удален на элементах div, используя обработчик событий - PullRequest
Новая
       35

Ограничение области, в которой элемент может быть удален на элементах div, используя обработчик событий

0 голосов
/ 01 мая 2020

Новый для js здесь. У меня есть доска размером 8 x 8, созданная с использованием divs, и я не уверен, как ограничить область применения элементов img, которые могут быть сброшены. Как вы ограничиваете область так, чтобы куски (p1 / p2 / p3) могли быть сброшены в их новые ячейки?

Пожалуйста, помогите мне, спасибо! 

HTML: 
<div id = 'gridcontainer'>  </div>

JS: 

pawn = {
    pieces:{
            p1: document.createElement('img'), p2: document.createElement('img'),
            p3: document.createElement('img')
    },
    currentLocation: {
        c1: 48, c2: 49, c3: 50     //current cells for p1, p2, p3 respectively in cells 48/49/50.
    },
    newLocation: {
        c1: 40, c2: 41, c3: 42     //new cells for p1, p2, p3 respectively in cells 40/41/42.
    }
};
function makeBoard(row, col)
{
    grid.style.cssText = "grid-template-columns: repeat(" + col + ", 60px);";

        for (i = 0; i < (row * col); i++)                       
        {
            cell[i] = document.createElement('div');
            cell[i].className = 'cells';                    
            cell[i].setAttribute('ondragover', 'allowDrop(event)');
            grid.appendChild(cell[i]);
        }
}
makeBoard(8, 8);
function allowDrop(ev)
    {               
        //(if ev.target is the droppable new cell for pawn.pieces[p1/p2/p3])
        {
            ev.preventDefault(); 
        }
    }
...