Drag and drop

Beta

The drag and drop interaction can be used to reposition elements on screen into a layout that benefits the user. This gives the user more flexibility to arrange and/or group items without having to make code changes.

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';

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