Glisser-déposer imbriqué avec react-beautiful-dnd

Question

Je crée un glisser-déposer vertical imbriqué avec react-beautiful-dnd . J'en ai référé quelques réponses dans github

J'ai bifurqué du bac à sable et en ai créé un nouveau pour le glisser-déposer vertical imbriqué. Lorsque je change le MDN intérieur, le MDN extérieur change les valeurs qui ne sont pas à l'intérieur du MDN.

[~ # ~] code [~ # ~]

 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
    });
  }

[~ # ~] démo [~ # ~] Code: https://codesandbox.io/s/ozq53zmj6

Answer 1

react-beautiful-dnd ne prend pas en charge le glisser-déposer imbriqué pour l'instant et c'est un élément de faible priorité selon leur feuille de route. Vous devez tout gérer sur l'extérieur <DragDropContext onDragEnd={this.handleDragEnd}>. Il ne donne pas d'informations parent par défaut dans l'objet result, j'ai donc conservé ces informations dans le composant enfant Droppable. Voir la démo ci-dessous si cela fonctionne pour vous.

Code: https://codesandbox.io/s/jp4ow4r45v

Modifier: Reportez-vous ci-dessous au bac à sable pour un extrait de code plus générique où vous pourrez appliquer un glisser-déposer imbriqué sur le conteneur parent.

Code: https://codesandbox.io/s/5v2yvpjn7n