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

Dragging

Item

Drag outside

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 column	Selector	Variable	Value
	.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--m-dragging--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 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--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-draggable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-draggable	--pf-v6-c-draggable--m-dragging--after--BorderRadius	6px
--pf-v6-c-draggable--m-dragging--after--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 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--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-draggable.pf-m-dragging	--pf-v6-c-draggable--Cursor	grabbing
--pf-v6-c-draggable--Cursor --pf-v6-c-draggable--m-dragging--Cursor grabbing
	.pf-v6-c-draggable.pf-m-drag-outside	--pf-v6-c-draggable--m-dragging--Cursor	not-allowed
--pf-v6-c-draggable--m-dragging--Cursor --pf-v6-c-draggable--m-drag-outside--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-draggable--m-dragging--after--BorderColor --pf-v6-c-draggable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #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--m-dragging--before--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #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--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-droppable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-dragging--after--BorderRadius	6px
--pf-v6-c-droppable--m-dragging--after--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-droppable	--pf-v6-c-droppable--m-drag-outside--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-droppable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--before--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-droppable--before--BackgroundColor --pf-v6-c-droppable--m-dragging--before--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--before--Opacity	.6
--pf-v6-c-droppable--before--Opacity --pf-v6-c-droppable--m-dragging--before--Opacity .6
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--after--BorderWidth	1px
--pf-v6-c-droppable--after--BorderWidth --pf-v6-c-droppable--m-dragging--after--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-droppable.pf-m-dragging	--pf-v6-c-droppable--after--BorderColor	(In light theme) #0066cc
--pf-v6-c-droppable--after--BorderColor --pf-v6-c-droppable--m-dragging--after--BorderColor --pf-t--global--border--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-droppable.pf-m-drag-outside	--pf-v6-c-droppable--m-dragging--after--BorderColor	(In light theme) #b1380b
--pf-v6-c-droppable--m-dragging--after--BorderColor --pf-v6-c-droppable--m-drag-outside--after--BorderColor --pf-t--global--border--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b

View source on GitHub