Drag and drop

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

Warning alert:Deprecated feature

This component implementation has been deprecated in favor of a newer solution, and is no longer being maintained or enhanced. To learn more about deprecated components, visit about PatternFly.

You can use the <DragDrop> component to move items in or between lists. The <DragDrop> component should contain <Droppable> components which contain <Draggable> components.

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

const DragDropCodeSample: React.FunctionComponent = () => (
  <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

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