Wie führt man Drag & Drop mit Reactjs durch?

Reactjs selbst hat keine eingebauten Funktionen für Drag & Drop, aber es gibt viele Bibliotheken Dritter, die man nutzen kann, um diese Funktion zu implementieren. Eine der beliebtesten ist “react-dnd”.

Hier sind die allgemeinen Schritte, wie man Drag & Drop mit “react-dnd” durchführt:

1. Installation: Installiere die Bibliothek mit npm oder yarn.

```bash npm install react-dnd react-dnd-html5-backend ``` oder ```bash yarn add react-dnd react-dnd-html5-backend ```

2. DragSource und DropTarget festlegen: Implementiere die beiden Hauptkomponenten, die in einem Drag & Drop-Vorgang benötigt werden: den DragSource (die Komponente, die gezogen werden kann) und den DropTarget (die Komponente, auf die die DragSource fallen gelassen werden kann).

Der DragSource könnte so aussehen: ```jsx import { DragSource } from ‘react-dnd’; const cardSource = { beginDrag(props) { return {}; } }; class Card extends React.Component { render() { return this.props.connectDragSource(

Some content

); } } export default DragSource(‘card’, cardSource, connect => ({ connectDragSource: connect.dragSource(), }))(Card); ``` Die DropTarget könnte so aussehen: ```jsx import { DropTarget } from ‘react-dnd’; const cardTarget = { drop() {} }; class Container extends React.Component { render() { return this.props.connectDropTarget(

{this.props.children}

); } } export default DropTarget(‘card’, cardTarget, connect => ({ connectDropTarget: connect.dropTarget(), }))(Container); ```

3. Drag & Drop Provider verwenden: Umgeben Sie die höchste Ebene der Komponente, die Drag & Drop-Interaktionen enthalten wird, mit dem DndProvider-Komponenten.

```jsx import { DndProvider } from ‘react-dnd’; import { HTML5Backend } from ‘react-dnd-html5-backend’; function App() { return ( ); } export default App; ```

Diese Schritte sind eine allgemeine Anleitung. Weitere Details hängen vom spezifischen Anwendungsfall der Drag & Drop-Funktionalität ab. Es ist auch zu beachten, dass verschiedene Bibliotheken unterschiedliche APIs und Methoden zur Handhabung von Drag & Drop bieten, und es ist ratsam, die offizielle Dokumentation der entsprechenden Bibliothek zu konsultieren.