javascript - 如何在 React 中拖放多个元素？

Question

这是我在 StackOverflow 上的第一个问题。我想用 React 构建一个小游戏，用户可以在其中将四联骨牌拖放到网格上，还可以根据自己的喜好重新定位或旋转它们。 tetrominos 由一个矩阵表示，然后每个 block 都在 li 元素中呈现。

z-tetromino 示例: [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0]

很遗憾，我还不能发布图片，这会让事情变得更容易。

网格过于用矩阵表示。

现在我要做的基本上是将这些 block 矩阵拖放到网格上，以便网格中的值相应地发生变化(0 → 1 等)。

问题是，我不知道如何使用标准 HTML5 DnD API 或 React DnD 一次拖动多个 li 元素。当用户点击某个四联骨牌的一个 li 元素时，整 block 应该移动。也许我可以使用 jQuery UI 解决这个问题，但由于在 React 中不允许直接 DOM 操作，所以我想知道如何去做。

我尝试将一个 block 拖到网格上，结果半最佳，因为一个 block 代替了一整行网格 block ，即使在 CSS 中设置了 display: inline-block。

这是第一个实验的一些简单代码。

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 多个元素的近似解决方案是什么。

感谢您的宝贵时间!

Answer 1

如果有人在 2020 年寻找解决方案。这是我的 current solution使用 react-dnd 和 react 钩子(Hook)。您可以尝试现场演示 here .

这是另一个更简单的例子，你可以查看codesandbox here .