Drag and drop

The drag and drop interaction can be used to reposition elements on screen into a layout that benefits the user. This gives the user more flexibility to arrange and/or group items without having to make code changes.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Note: This drag and drop implementation lives in its own package at @patternfly/react-drag-drop!

Sorting examples

Basic drag and drop sorting

one

two

three

Basic drag and drop sorting with drag button

one

two

three

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub