Drag and drop

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

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 10px 0px rgb(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 10px 0px rgb(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--BorderRadius	6px
--pf-v6-c-draggable--m-dragging--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.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--BorderRadius	6px
--pf-v6-c-droppable--before--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.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