# How to Drag and Drop in React

DevFeed: [How to Drag and Drop in React](<https://devfeed.tech/articles/how-to-drag-and-drop-in-react-18958.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-drag-and-drop/>)

Author: Robin Wieruch

Published: 2024-10-10T04:56:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [draggable](<https://devfeed.tech/topics/draggable.md>), [Library](<https://devfeed.tech/topics/library.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [container](<https://devfeed.tech/tags/container.md>), [draggable](<https://devfeed.tech/tags/draggable.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [react-dnd](<https://devfeed.tech/tags/react-dnd.md>), [react-drag-and-drop](<https://devfeed.tech/tags/react-drag-and-drop.md>), [state](<https://devfeed.tech/tags/state.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

## AI overview

A step-by-step React tutorial for building vertical and horizontal drag-and-drop lists with @hello-pangea/dnd. It covers stateful items, reusable components, Droppable and Draggable components, and reordering list state after drag events.

## Source excerpt

A tutorial about using Drag and Drop in React by example for a vertical list (later horizontal list) with @hello-pangea/dnd as DnD library ...