Drag and drop

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.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-draggable--pf-v6-c-draggable--Cursor
auto
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--Cursor
grabbing
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--BoxShadow
0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--BackgroundColor
transparent
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--after--BorderWidth
1px
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-draggable--pf-v6-c-draggable--m-dragging--after--BorderRadius
6px
.pf-v6-c-draggable--pf-v6-c-draggable--m-drag-outside--Cursor
not-allowed
.pf-v6-c-draggable--pf-v6-c-draggable--m-drag-outside--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-draggable.pf-m-dragging--pf-v6-c-draggable--Cursor
grabbing
.pf-v6-c-draggable.pf-m-drag-outside--pf-v6-c-draggable--m-dragging--Cursor
not-allowed
.pf-v6-c-draggable.pf-m-drag-outside--pf-v6-c-draggable--m-dragging--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-droppable--pf-v6-c-droppable--before--BackgroundColor
transparent
.pf-v6-c-droppable--pf-v6-c-droppable--before--Opacity
0
.pf-v6-c-droppable--pf-v6-c-droppable--after--BorderWidth
0
.pf-v6-c-droppable--pf-v6-c-droppable--after--BorderColor
transparent
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--before--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--before--Opacity
.6
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--after--BorderWidth
1px
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-droppable--pf-v6-c-droppable--m-dragging--after--BorderRadius
6px
.pf-v6-c-droppable--pf-v6-c-droppable--m-drag-outside--after--BorderColor
(In light theme) #b1380b
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--before--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--before--Opacity
.6
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--after--BorderWidth
1px
.pf-v6-c-droppable.pf-m-dragging--pf-v6-c-droppable--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-droppable.pf-m-drag-outside--pf-v6-c-droppable--m-dragging--after--BorderColor
(In light theme) #b1380b