react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

# Garn
Garn hinzufügen reagieren-schön-dnd
 
# npm
npm installiere react-beautiful-dnd --save

importiere React, {Komponente} von „react“;
importiere { DragDropContext, Droppable, Draggable } aus „react-beautiful-dnd“;
 
//Daten initialisieren const getItems = count =>
  Array.from({ Länge: Anzahl }, (v, k) => k).map(k => ({
    ID: `item-${k + 1}`,
    Inhalt: `Dies ist Inhalt ${k + 1}`
  }));
 
// Array-Reihenfolge neu aufzeichnen const reorder = (list, startIndex, endIndex) => {
  const Ergebnis = Array.from(Liste);
 
  const [entfernt] = result.splice(startIndex, 1);
 
  result.splice(endIndex, 0, entfernt);
  Ergebnis zurückgeben;
};
 
konstantes Raster = 8;
 
// Stil festlegen const getItemStyle = (isDragging, draggableStyle) => ({
  // einige grundlegende Stile, um die Elemente ein bisschen schöner aussehen zu lassen
  Benutzerauswahl: "keine",
  Polsterung: Gitter * 2,
  Rand: `0 0 ${grid}px 0`,
 
  // Hintergrund ändert sich beim Ziehen background: isDragging ? "lightgreen" : "#ffffff",
 
  // Stile, die wir auf Draggables anwenden müssen
  … ziehbarer Stil
});
 
const getListStyle = () => ({
  Hintergrund: 'schwarz',
  Polsterung: Gitter,
  Breite: 250
});
 
 
 
exportiere Standardklasse ReactBeautifulDnd erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Artikel: getItems(11)
    };
    dies.onDragEnd = dies.onDragEnd.bind(dies);
  }
 
  onDragEnd(Ergebnis) {
    wenn (!Ergebnis.Ziel) {
      zurückkehren;
    }
 
    const items = neu anordnen(
      dieser.Status.Artikel,
      Ergebnis.Quelle.Index,
      Ergebnis.Ziel.Index
    );
 
    dies.setState({
      Artikel
    });
  }
 
 
  rendern() {
    zurückkehren (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Mitte>
          <Abwerfbar, abwerfbareId="abwerfbar">
            {(bereitgestellt, Schnappschuss) => (
              <div
              //Das gleiche Element, auf das provided.droppableProps angewendet wird.
                {...bereitgestellt.droppableProps}
                // Damit Droppable ordnungsgemäß funktioniert, muss es an den höchstmöglichen bereitgestellten DOM-Knoten gebunden sein. innerRef.
                ref={bereitgestellt.innerRef}
                Stil = {getListStyle (Schnappschuss)}
              >
                {this.state.items.map((item, index) => (
                  <Ziehbar Schlüssel={item.id} draggableId={item.id} index={index}>
                    {(bereitgestellt, Schnappschuss) => (
                      <div
                        ref={bereitgestellt.innerRef}
                        {...bereitgestellt.draggableProps}
                        {...bereitgestellt.dragHandleProps}
                        Stil = {getItemStyle (
                          snapshot.isDragging,
                          bereitgestellt.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                    )}
                  </Ziehbar>
                ))}
                {bereitgestellt.Platzhalter}
              </div>
            )}
          </Abwerfbar>
        </center>
      </DragDropContext>
    );
  }
}

importiere React, {Komponente} von „react“;
importiere { DragDropContext, Droppable, Draggable } aus „react-beautiful-dnd“;
 
 
const getItems = Anzahl => (
  Array.from({ Länge: Anzahl }, (v, k) => k).map(k => ({
    ID: `item-${k + 1}`,
    Inhalt: `Dies ist Inhalt ${k + 1}`
  }))
)
 
// Array-Reihenfolge neu aufzeichnen const reorder = (list, startIndex, endIndex) => {
  const Ergebnis = Array.from(Liste);
  //Löschen und die gelöschten Elemente aufzeichnen const [removed] = result.splice(startIndex, 1);
  //Die ursprünglichen Elemente dem Array hinzufügen result.splice(endIndex, 0, removed);
  Ergebnis zurückgeben;
};
 
konstantes Raster = 8;
 
 
// Stil festlegen const getItemStyle = (isDragging, draggableStyle) => ({
  // einige grundlegende Stile, um die Elemente ein bisschen schöner aussehen zu lassen
  Benutzerauswahl: "keine",
  Polsterung: Gitter * 2,
  Rand: `0 ${grid}px 0 0 `,
 
  // Hintergrund ändert sich beim Ziehen background: isDragging ? "lightgreen" : "#ffffff",
 
  // Stile, die wir auf Draggables anwenden müssen
  … ziehbarer Stil
});
 
const getListStyle = () => ({
  Hintergrund: 'schwarz',
  Anzeige: 'flex',
  Polsterung: Gitter,
  Überlauf: „auto“,
});
 
 
Klasse ReactBeautifulDndHorizontal erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dieser.Zustand = {
      Artikel: getItems(10)
    };
    dies.onDragEnd = dies.onDragEnd.bind(dies);
  }
 
  onDragEnd(Ergebnis) {
    wenn (!Ergebnis.Ziel) {
      zurückkehren;
    }
 
    const items = neu anordnen(
      dieser.Zustand.Artikel,
      Ergebnis.Quelle.Index,
      Ergebnis.Ziel.Index
    );
 
    dies.setState({
      Artikel
    });
  }
 
  rendern() {
    zurückkehren (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="abwerfbar" Richtung="horizontal">
          {(bereitgestellt, Schnappschuss) => (
            <div
              {...bereitgestellt.droppableProps}
              ref={bereitgestellt.innerRef}
              Stil = {getListStyle (Snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <Ziehbar Schlüssel={item.id} draggableId={item.id} index={index}>
                  {(bereitgestellt, Schnappschuss) => (
                    <div
                      ref={bereitgestellt.innerRef}
                      {...bereitgestellt.draggableProps}
                      {...bereitgestellt.dragHandleProps}
                      Stil = {getItemStyle (
                        snapshot.isDragging,
                        bereitgestellt.draggableProps.style
                      )}
                    >
                      {item.content}
                    </div>
                  )}
                </Ziehbar>
              ))}
              {bereitgestellt.Platzhalter}
            </div>
          )}
        </Abwerfbar>
      </DragDropContext>
    )
  }
}
 
Standard exportieren ReactBeautifulDndHorizontal