Drag and drop

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Basic

Item

Dragging

Item

Drag outside

Item

Documentation

Usage

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

CSS variables


	.pf-c-draggable	--pf-c-draggable--Cursor	auto
	.pf-c-draggable	--pf-c-draggable--m-dragging--Cursor	grabbing
	.pf-c-draggable	--pf-c-draggable--m-dragging--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-c-draggable--m-dragging--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-c-draggable	--pf-c-draggable--m-dragging--after--BorderWidth	1px
--pf-c-draggable--m-dragging--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-draggable	--pf-c-draggable--m-dragging--after--BorderColor	#06c
--pf-c-draggable--m-dragging--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-draggable	--pf-c-draggable--m-drag-outside--Cursor	not-allowed
	.pf-c-draggable	--pf-c-draggable--m-drag-outside--after--BorderColor	#c9190b
--pf-c-draggable--m-drag-outside--after--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-draggable.pf-m-dragging	--pf-c-draggable--Cursor	grabbing
--pf-c-draggable--Cursor --pf-c-draggable--m-dragging--Cursor grabbing
	.pf-c-draggable.pf-m-drag-outside	--pf-c-draggable--m-dragging--Cursor	not-allowed
--pf-c-draggable--m-dragging--Cursor --pf-c-draggable--m-drag-outside--Cursor not-allowed
	.pf-c-draggable.pf-m-drag-outside	--pf-c-draggable--m-dragging--after--BorderColor	#c9190b
--pf-c-draggable--m-dragging--after--BorderColor --pf-c-draggable--m-drag-outside--after--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-droppable	--pf-c-droppable--m-dragging--after--BackgroundColor	rgba(255, 255, 255, 0.6)
	.pf-c-droppable	--pf-c-droppable--m-dragging--after--BorderWidth	1px
--pf-c-droppable--m-dragging--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-droppable	--pf-c-droppable--m-dragging--after--BorderColor	#06c
--pf-c-droppable--m-dragging--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-droppable	--pf-c-droppable--m-drag-outside--after--BorderColor	#c9190b
--pf-c-droppable--m-drag-outside--after--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-droppable.pf-m-drag-outside	--pf-c-droppable--m-dragging--after--BorderColor	#c9190b
--pf-c-droppable--m-dragging--after--BorderColor --pf-c-droppable--m-drag-outside--after--BorderColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines