Skip to content

Drag and drop

The drag and drop component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts.

Examples

Basic

Item
Item
Item
Item
Item
Item
Item
Item

Dragging

Item
Item
Item
Item
Item
Item
Item
Item

Drag outside

Item
Item
Item
Item
Item
Item
Item
Item

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-draggable
*
Initiates a draggable element.
.pf-v6-c-droppable
*
Initiates a droppable element.
.pf-m-dragging
.pf-v6-c-draggable, .pf-v6-c-droppable
Indicates a draggable and droppable element are in the dragging state.
.pf-m-drag-outside
.pf-v6-c-draggable, .pf-v6-c-droppable
Indicates a draggable element is dragged outside of a droppable element.

Edit this page on GitHub

Contribute

Community

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat
Copyright © 2014-2026 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines