drag_and_drop.md

Drag and Drop

Drag and Drop in React

We are currently using the react-dnd package in liferay-portal, and we provide a shared copy as part of the frontend-js-react-web package.

We chose it because it powerful, flexible, and sufficiently low-level that it can be adapted to address all the use cases we've encountered so far. If you find a scenario in which it is lacking, please open an issue in the liferay-frontend-projects repo so that we can evaluate how to best meet that use case.

See also

• The react-dnd documentation.
• Our initial discussion about drag-and-drop strategy, which shows how we settled on using react-dnd.
• To see example usages, search for "react-dnd" in liferay-portal. Some sample hits follow (but note, at the time of writing the methods used are considered to be "Legacy Decorator API" — react-dnd's current top-level API is based on hooks such as useDrag, useDrop and so on):
  • Defining a drop target.
  • Defining a drag source.
  • Declaring a drag and drop context.