Drag and Drop

React Aria collection components support drag and drop with mouse and touch interactions, and full keyboard and screen reader accessibility. Learn how to provide drag data and handle drop events to move, insert, or reorder items.

Introduction

Drag and drop allows a user to move data between two locations. The initial location is referred to as a drag source, and the final location is referred to as a drop target. The dragged data consists of one or more drag items, each of which contains data such as text, files, or application-specific objects. These are shown in a drag preview under the user's cursor.