Verwenden von react-beautiful-dnd zum Implementieren von Drag & Drop zwischen Listen

Warum react-beautiful-dnd wählen?

Im Vergleich zu react-dnd eignet sich react-beautiful-dnd besser zum Ziehen zwischen Listen, unterstützt mobile Endgeräte und ist einfacher zu verwenden.

Grundlegende Verwendung

Grundlegende Konzepte

• DragDropContext: Einen verschiebbaren Bereich erstellen
• onDragStart: Drag-Start-Rückruf
• onDragUpdate: Rückruf während des Ziehens
• onDragEnd: Rückruf, wenn das Ziehen endet
• Ablagefähig - der Bereich, in dem der verschiebbare Block platziert werden kann
• Draggalbe - Das Element, das gezogen werden kann

Anwendung

Fügen Sie den Code, den Sie per Drag & Drop verwenden möchten, in DragDropContext ein.

importiere { DragDropContext } von „react-beautiful-dnd“;

Klasse App erweitert React.Component {
  beim ZiehenStart = () => {
    /*…*/
  };
  beiDragUpdate = () => {
    /*…*/
  }
  beiDragEnd = () => {
    // das einzige, das benötigt wird
  };

  rendern() {
    zurückkehren (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <div>Hallo Welt</div>
      </DragDropContext>
    );
  }
}

Bestimmen Sie den abwerfbaren Bereich

importiere { DragDropContext, Droppable } von „react-beautiful-dnd“;

Klasse App erweitert React.Component {
  // ...
  rendern() {
    zurückkehren (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <Abwerfbar, abwerfbareId="abwerfbar-1">
          {(bereitgestellt, Schnappschuss) => (
            <div
              ref={bereitgestellt.innerRef}
              Stil = {{ Hintergrundfarbe: Snapshot.isDraggingOver? 'blau': 'grau'}}
              {...bereitgestellt.droppableProps}
            >
              <h2>Ich bin ein Droppable!</h2>
              {bereitgestellt.Platzhalter}
            </div>
          )}
        </Abwerfbar>
      </DragDropContext>
    );
  }
}

• Erforderliche DroppableId (Zeichenfolge), die das Droppable der Anwendung eindeutig identifiziert. Ändern Sie diese ID nicht, insbesondere nicht beim Ziehen
• provided.placeholder: Platzhalter (dieser Platzhalter ist der Standard und erfüllt im Allgemeinen nicht die Anforderungen)
• Schnappschuss: Der aktuelle Drag-Status, mit dem das Erscheinungsbild des Droppables beim Ziehen geändert werden kann

Verwenden Sie Draggable, um das Drag-Element im Droppable-Bereich einzuschließen

importiere { DragDropContext, Droppable, Draggable } aus „react-beautiful-dnd“;

Klasse App erweitert React.Component {
  // ...

  rendern() {
    zurückkehren (
      <DragDropContext
        onDragStart={this.onDragStart}
        onDragUpdate={this.onDragUpdate}
        onDragEnd={this.onDragEnd}
      >
        <Abwerfbar, abwerfbareId="abwerfbar-1">
          {(bereitgestellt, Schnappschuss) => (
            <div
              ref={bereitgestellt.innerRef}
              Stil = {{ Hintergrundfarbe: Snapshot.isDraggingOver? 'blau': 'grau'}}
              {...bereitgestellt.droppableProps}
            >
              <Ziehbar draggableId="draggable-1" index={0}>
                {(bereitgestellt, Schnappschuss) => (
                    <div
                      ref={bereitgestellt.innerRef}
                      {...bereitgestellt.draggableProps}
                      {...bereitgestellt.dragHandleProps}
                    >
                      <h4>Mein verschiebbares Objekt</h4>
                    </div>
                )}
              </Ziehbar>
              {bereitgestellt.Platzhalter}
            </div>
          )}
        </Abwerfbar>
      </DragDropContext>
    );
  }
}

• Ein Draggable muss immer innerhalb eines Droppable enthalten sein
• DraggablebId (Zeichenfolge): Es muss eine eindeutige ID und ein Index vorhanden sein (auch erforderlich, wenn es sich um einen Durchlaufschlüssel handelt). Ändern Sie diese ID nicht, insbesondere nicht beim Ziehen.

Wenn das Ziehen beendet ist, ändern Sie die Quelldaten

onDragEnd = Ergebnis => {
  const { Quelle, Ziel, draggableId } = Ergebnis;
  wenn (!Ziel) {
    zurückkehren;
  }

  // Quell- und Zielarrays ändern, das gezogene Element aus dem Quellarray löschen und in das Zielarray einfügen this.setState({
    xxx: xxx,
  });
}

Bei der Nutzung aufgetretene Probleme

Fügen Sie dem Drag-Zielbereich einen benutzerdefinierten Platzhalter hinzu

Wenn react-beautiful-dnd in den Zielbereich gezogen wird, wird zwischen den Elementen im Zielbereich für das aktuelle Drag-Element automatisch ein Leerzeichen gelassen. Der Abstand dieses Leerzeichens entspricht der Größe des Draggable-Elements im Zielbereich (schließt jedoch nicht den Rand des Elements ein, was ebenfalls eine Falle darstellt. Die Lösung wird weiter unten erläutert).

Daher können Sie innerhalb dieser Entfernung die absolute Positionierung verwenden und einen benutzerdefinierten Platzhalter hinzufügen. Spezifischer Ansatz: Berechnen Sie den linken und oberen Abstand des aktuellen benutzerdefinierten Platzhalterelements und aktualisieren Sie diese beiden Abstände im DragUpdate-Ereignis. Weitere Informationen finden Sie unter beatiful-dnd-custom-placeholder-demo

Beim Ziehen führt das Ändern der Transform-Eigenschaft des gezogenen Elements dazu, dass das Ziehen irgendwo hängen bleibt und das gezogene Element an der falschen Position platziert wird

In der offiziellen Dokumentation gibt es eine Beschreibung, die grob besagt, dass das verschiebbare Element die Position „feste Positionierung“ verwendet, aber durch die Transformation beeinflusst wird.

#### Warnung: `Position: fest`

`react-beautiful-dnd` verwendet `position: fixed`, um das gezogene Element zu positionieren. Dies ist recht robust und ermöglicht es Ihnen, `position: relative | absolute | fixed`-Eltern zu haben. Leider wird `position:fixed` jedoch [von `transform`](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/) beeinflusst (wie `transform: rotate(10deg);`). Dies bedeutet, dass, wenn Sie ein `transform: *` auf einem der Eltern von `<Draggable />` haben, die Positionierungslogik beim Ziehen falsch ist. Lahm! Für die meisten Verbraucher wird dies kein Problem sein.

Um dies zu umgehen, können Sie [Ihr <Draggable /> neu zuordnen](/docs/guides/reparenting.md). Wir aktivieren diese Funktion standardmäßig nicht, da sie Leistungsprobleme verursacht.

Die folgende Lösung wird bereitgestellt: Verwenden Sie createPortal, um das Drag-Element an ein leeres übergeordnetes Element anzuhängen. Bitte beachten Sie das Problem: Transformieren auf übergeordnetes Element bringt Drag-Positionierung durcheinander

Aber diese Methode löst mein Problem nicht, da immer noch ein benutzerdefinierter Platzhalter erforderlich ist. Beim Ziehen muss auch der linke Abstand des Platzhalters berechnet werden, was bedeutet, dass die untergeordneten Elemente unter dem übergeordneten Knoten des aktuell gezogenen Elements abgerufen werden müssen. Wenn createPortal verwendet wird, kann der ursprüngliche übergeordnete Knoten des gezogenen Elements nicht abgerufen werden, sodass die createPortal-Lösung verworfen wird. Der Effekt von „Transform: Scale“ wird durch die Änderung von Breite und Höhe erreicht.

Um ein Element auf einem Mobilgerät zu ziehen, müssen Sie lange darauf drücken.

In der offiziellen Dokumentation heißt es, dass in mobilen Szenarien bei Fingeroperationen auf ziehbaren Elementen nicht festgestellt werden kann, ob es sich um Tippen, kräftiges Drücken oder Scrollen handelt. Sie müssen daher lange auf das Element drücken, um festzustellen, ob es sich um ein Ziehen handelt.

Ziehen starten: lange drücken
Ein Benutzer kann einen Drag-Vorgang starten, indem er seinen Finger 👇 für eine kurze Zeit 🕑 auf einem Element hält (langes Drücken).

Wenn Sie ein Element ziehen und es an der Zielposition schweben lassen, ist der Abstand des frei gewordenen Einfügebereichs ungenau. Dies ist das oben erwähnte Problem. Der freie Abstand des Platzhalters zwischen Draggables ist der Abstand eines Draggables, schließt jedoch nicht den Rand des Dragglables ein. Bitte beachten Sie dieses Problem.

Schließlich wird die Polsterung verwendet, um den Abstand zwischen Draggables zu steuern, sodass der beim Ziehen frei gewordene Raum die Polsterung umfasst.

Zusammenfassen

react-beautiful-dnd ist relativ einfach zu verwenden. Im März 2021 wurde v13.1.0 veröffentlicht und ist relativ aktiv. Ich hoffe, die oben genannten Fallstricke werden für alle hilfreich sein.

Verweise

Offizielle Website beautiful-dnd
react-beautiful-dnd – Erste Schritte – Tutorial

Dies ist das Ende dieses Artikels über die Verwendung von react-beautiful-dnd zum Implementieren von Drag & Drop zwischen Listen. Weitere relevante Drag & Drop-Inhalte zu React-Listen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!