Это мой первый вопрос по StackOverflow. Я хочу создать небольшую игру с React, в которой пользователи могут перетаскивать тетромино на сетку, а также перемещать или поворачивать их по своему вкусу. Тетромино представлены матрицей, а затем каждый блок отображается в элементе li.
Пример для z-тетромино:
[0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0]
К сожалению, я пока не могу публиковать изображения, это облегчит задачу.
Сетка слишком представлена матрицей.
Теперь я хочу перетащить эти блочные матрицы в сетку, чтобы значения в сетке соответствующим образом изменились (0 → 1 и т. Д.).
Проблема в том, что я понятия не имею, как перетаскивать сразу несколько элементов li с помощью стандартного HTML5 DnD API или React DnD. Когда пользователь нажимает на один элемент li определенного тетромино, весь кусок должен двигаться. Возможно, я мог бы решить эту проблему с помощью пользовательского интерфейса jQuery, но, поскольку в React прямая манипуляция с DOM запрещена, мне остается только задуматься, как это сделать.
Я попытался перетащить один блок на сетку, которая работала полуоптимально, потому что один блок занял место целого ряда блоков сетки, даже с display: inline-block set в CSS.
Вот простой код из первого эксперимента.
onDragStart = e => {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', e.target.id);
// e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
};
handleDrop = e => {
const pieceOrder = e.dataTransfer.getData('text');
// console.log(document.getElementById(pieceOrder));
// e.target.appendChild(document.getElementById(pieceOrder));
// console.log(pieceOrder);
e.target.replaceWith(document.getElementById(pieceOrder));
e.target.remove();
};
renderEmptyBoardCell(i) {
return (
<li key={i} className="emptyBoardCell" onDragOver={(e) => e.preventDefault()} onDrop={(e) => this.handleDrop(e)}>></li>
);
}
renderTemplateBoardCell(i) {
return (
<li key={i} className="templateBoardCell" onDragOver={(e) => e.preventDefault()} onDrop={(e) => this.handleDrop(e)}>></li>
);
}
renderEmptyCell(i) {
return (
<li key={i} className="emptyCell"></li>
);
}
renderFilledCell(piece_config, i) {
return (
<li key={i} id={i} className={`filledCell ${piece_config}`} draggable onDragStart={this.onDragStart}></li>
);
}
Так что вопрос в том, будет ли это теоретически возможно с React DnD или любой другой библиотекой? Если да, каким было бы приблизительное решение для нескольких элементов DnD одновременно.
Спасибо за ваше время!