Het slepen en neerzetten, ook wel drag and drop genoemd, kan in Reactjs worden gerealiseerd op een aantal verschillende manieren, afhankelijk van de complexiteit van je app en de flexibiliteit die je nodig hebt.
Een eenvoudig voorbeeld is het gebruik van de HTML Drag en Drop API in combinatie met de React constructor voor interactiviteit. Het basisidee is dat je de native HTML attributen `draggable`, `onDragStart`, `onDrop` en `onDragOver` gebruikt in je React-componenten.
Hier is een eenvoudig voorbeeld van een makeerbaar itemcomponent:
```
class Item extends React.Component {
handleDragStart = e => {
e.dataTransfer.setData(‘id’, this.props.id);
};
En een container die een item accepteert:
```
class Container extends React.Component {
handleDrop = e => {
e.preventDefault();
var id = e.dataTransfer.getData(‘id’);
this.props.moveItem(id, this.props.id);
};
Als je iets geavanceerder en flexibeler nodig hebt, is er een populaire bibliotheek genaamd react-beautiful-dnd die veel flexibiliteit en controle biedt.
```
npm install react-beautiful-dnd
```
En het gebruik kan zijn:
```
import { DragDropContext, Draggable, Droppable } from ‘react-beautiful-dnd’;
…
{this.state.items.map((item, index) => (
)}
{item.content}
)}
…
function onDragEnd(result) {
// de volgorde van items bijwerken
}
```
Je hebt ook andere bibliotheken als `react-dnd` die iets complexer zijn om in te stellen, maar zeer flexibel zijn en veel geavanceerde functies bieden voor complexe apps.
