Drag and drop

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