如何在React中拖放多个元素?

问题描述 投票:1回答:1

这是我在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多元素的近似解是什么?

谢谢你的时间!

javascript reactjs drag-and-drop
1个回答
1
投票

您只能使用react-dnd一次拖动一个项目。要么使用不同的库,要么以某种方式将不同的部分组合成一个项目,然后拖放该项目。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.