web-dev-qa-db-ja.com

react-beautiful-dndによるネストされたドラッグアンドドロップ

react-beautiful-dnd を使用して、垂直にネストされたドラッグアンドドロップを作成しています。私はいくつか言及しました githubの回答

私はサンドボックスから分岐し、垂直にネストされたドラッグアンドドロップ用に新しいものを作成しました。 DNDの内側を変更すると、DNDの外側でDNDの内側ではなく値が変更されます。

enter image description here

[〜＃〜]コード[〜＃〜]

 onDragEnd(result) {
    // dropped outside the list
    console.log("innner drag");
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    this.setState({
      items
    });
  }

[〜＃〜] demo [〜＃〜]コード： https://codesandbox.io/s/ozq53zmj6

javascriptreactjsdrag-and-dropnested
8
Selvin

react-beautiful-dndは現在、ネストされたドラッグドロップをサポートしておらず、ロードマップによると優先度の低いアイテムです。外側のすべてを処理する必要があります<DragDropContext onDragEnd={this.handleDragEnd}>。デフォルトではresultオブジェクトの親情報は提供されないため、その情報を子Droppableコンポーネントに保持しています。これで問題が解決する場合は、以下のデモを参照してください。

コード： https://codesandbox.io/s/jp4ow4r45v

編集：ネストされたドラッグドロップを親コンテナーに適用できる、より一般的なコードスニペットについては、以下のサンドボックスを参照してください。

コード： https://codesandbox.io/s/5v2yvpjn7n

8
Debajit Majumder