这是我在StackOverflow上的第一个问题。我想用React构建一个小游戏,用户可以将tetrominos拖放到网格上,并根据自己的喜好重新定位或旋转它们。 tetrominos由矩阵表示,然后每个块都以li元素呈现。
z-tetromino的示例:[0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0]
不幸的是我还不能发布图片,这会让事情变得更容易。
网格也由矩阵表示。
现在我想做的是基本上将这些块矩阵拖放到网格上,以便网格中的值相应地改变(0→1等)。
问题是,我不知道如何使用标准HTML5 DnD API或React DnD一次拖动多个li元素。当用户点击某个tetromino的一个li元素时,整个部分应该移动。也许我可以使用jQuery UI来解决这个问题,但是因为在React中不允许直接进行DOM操作,所以我不知道该怎么做。
我试图将一个块拖到最佳工作的网格上,因为一个块取代了整行网格块,即使是显示: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多元素的近似解是什么?
谢谢你的时间!
您只能使用react-dnd一次拖动一个项目。要么使用不同的库,要么以某种方式将不同的部分组合成一个项目,然后拖放该项目。