web-dev-qa-db-ja.com

react-dndの空のセクションにアイテムをドロップする方法は？

react-dndを使用してドラッグアンドドロップリストを作成しようとしています。

私はパートワーキングの例を持っています： codesandbox example

ここに1つの問題があります。

空のセクションにアイテムをドロップできません。

image1を最初または3番目のグループに移動すると、2番目のグループに戻ることはできません。また、グループの最後の位置にアイテムをドロップすることもできません（最後の位置以外の位置を設定してから、最後の位置に移動する必要があります）が、これらの問題は関連していると思います。

問題はここにあると思います、DragItem.js：

export default DropTarget(Types.FILE, fileTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType()
}))(DragSource(Types.FILE, cardSource, collect)(DragItem));

DragSourceとDropTargetは同じコンポーネントであるため、セクション自体に項目がない場合、DrogTargetはそこにはありません。

アイテムをProject.jsに移動しようとすると、セクション全体（すべての要素が含まれる）がドラッグする1つの要素でしたが、これも解決策ではありません。

何か案は？または多分私はこのタスクに別のツールを使用する必要がありますか？

javascriptreactjsdrag-and-dropreact-dndsortablejs
2
sosick

ドラッグ可能なカードをドロップ可能なコンテナとして使用しているようです（カードがないため、ドロップする場所がありません）。

私の使い方react-dnd以前は、フックuseDropを使用してドロップ可能なコンテナを作成していました ract-dnd use drop この場合、私は<div className="files-container">をドロップ可能なコンテナに入れます。これにより、カードを空のコンテナーにドロップできるようになります。

1
MarioLema

最後に、この問題を解決するために別のパッケージを使用することにしました。代わりにreact-dnd使用しましたreact-sortablejs。この場合は実装が簡単で、このタスクでのすべての期待に応えます。

作業例： codesandbox example

ありがとう！

0
sosick