Skip to content
Patternfly Logo

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. Learn more about Beta components here.

You can use DragDrop to move items in or between lists. DragDrops should contain Droppables which contain Draggables.

import React from 'react';
import { DragDrop, Draggable, Droppable } from '@patternfly/react-core';

<DragDrop> {/* DragDrop houses the context for dragging and dropping */}
  <Droppable>
    <Draggable>
      You can put anything here! It will be wrapped in a styled div.
    </Draggable>
    <Draggable>
      You can have as many Draggables as you like.
    </Draggable>
  </Droppable>
  <Droppable> {/* You can also have many droppables! */}
    <Draggable />
  </Droppable>
</DragDrop>

Note: Keyboard accessibility and screen reader accessibility are still in development.

Examples

Basic

item 0
item 1
item 2
item 3
item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
item 5
item 6
item 7
item 8
item 9

Multiple lists

item 0
item 1
item 2
item 3
item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4 item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14 item 14

Props

DragDrop

*required
NameTypeDefaultDescription
childrenReact.ReactNodePotentially Droppable and Draggable children
onDrag(source: DraggableItemPosition) => boolean() => trueCallback for drag event. Return true to allow drag, false to disallow.
onDragMove(source: DraggableItemPosition, dest?: DraggableItemPosition) => void() => {}Callback on mouse move while dragging.
onDrop(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean() => falseCallback for drop event. Return true to allow drop, false to disallow.

Draggable

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside DragDrop
classNamestringClass to add to outer div
hasNoWrapperbooleanfalseDon't wrap the component in a div. Requires passing a single child.
styleNo type info{}

Droppable

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside DragDrop
classNamestringClass to add to outer div
droppableIdstring'defaultId'Id to be passed back on drop events
hasNoWrapperbooleanfalseDon't wrap the component in a div. Requires passing a single child.
zonestring'defaultZone'Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page.

DraggableItemPosition

*required
NameTypeDefaultDescription
droppableIdrequiredstringParent droppableId
indexrequirednumberIndex of item in parent Droppable

View source on GitHub