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 implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

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
Name	Type	Default	Description
children	React.ReactNode		Potentially Droppable and Draggable children
onDrag	(source: DraggableItemPosition) => boolean	() => true	Callback 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	() => false	Callback for drop event. Return true to allow drop, false to disallow.

Draggable

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside DragDrop
className	string		Class to add to outer div
hasNoWrapper	boolean	false	Don't wrap the component in a div. Requires passing a single child.
style	No type info	{}

Droppable

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside DragDrop
className	string		Class to add to outer div
droppableId	string	'defaultId'	Id to be passed back on drop events
hasNoWrapper	boolean	false	Don't wrap the component in a div. Requires passing a single child.
zone	string	'defaultZone'	Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page.

DraggableItemPosition

*required
Name	Type	Default	Description
droppableIdrequired	string		Parent droppableId
indexrequired	number		Index of item in parent Droppable

View source on GitHub