Usage
Simple list
- Draggable area: The drag and drop interaction can be triggered with click and hold over any part of the item. The
fa-grip
icon is used to show that the drag and drop interaction is available.
![Showing the area in which an item can be dragged.](/images/Simple-list-drag-1.f8da60a4edac3a20.png)
Bounding box: Upon click & hold a
--pf-v5-global--active-color--100
border will show the draggable area that is available.onDrag event: The list item being dragged will also use a
--pf-v5-global--active-color--100
border to highlight it as the item being dragged and all other list items will switch to a disabled state. The space where the item is being dragged from will remain empty to indicate its original position in the list.
![Borders appear around the item and bounding box shows the area in which an item can be dragged.](/images/Simple-list-drag-2-3.180662308e0067f4.png)
- postDrag event: Once dropped, the items will be reordered based on the user’s action. The space left empty is then filled by the next item in the list.
![postDrag drops item into new position and all border highlights are disabled.](/images/Simple-list-drag-4.300c17bdb6dd04aa.png)
- Error state: If the list item is dragged outside the bounding box the borders on the dragged item will switch to
--pf-v5-global--danger-color--100
and the cursor will change tonot-allowed
to indicate an invalid placement. If the user releases the cursor outside the bounding area the dragged item will return to its default position.
![Dragging outside the bounding box shows an error state on the dragged item.](/images/Simple-list-drag-5-error.4a4097f454ec2dd0.png)
Multiple lists
PatternFly drag and drop allows users to move items between different list groups. For example, in a To-Do list scenario users can quickly drag list items from the ”In progress” column to the “Done” column.
- Draggable item
![Showing the area in which an item can be dragged.](/images/Multiple-list-drag-1.adace9b2fd13cc6e.png)
- onDrag event
![Borders appear around the item and bounding boxes shows the area in which an item can be dragged.](/images/Multiple-list-drag-2.1e45a1a8491c7d4d.png)
- postDrag event
![postDrag drops item into new position and all border highlights are disabled.](/images/Multiple-list-drag-3.b7d21cd8eb3fe08d.png)
- Error state
![When dragging outside the bounding box the border color of the dragged item changes to pf-color-red-100 and the cursor changes to error state.](/images/Multiple-list-drag-4-error.5b716bc29e694037.png)
Draggable cards
In a card view, when the selected card has been dropped the others will reposition following a left-to-right flow by default.
- Draggable item
![Showing the area in which an item can be dragged.](/images/Card-drag-1.ede01ceb648201f4.png)
- onDrag event
![Borders appear around the item and bounding box shows the area in which an item can be dragged.](/images/Card-drag-2.a37c4233a2aa2875.png)
- postDrag event
![postDrag drops item into new position and all border highlights are disabled.](/images/Card-drag-3.9303f983bb444ce4.png)
- Error state
![When dragging outside the bounding box the border color of the dragged item changes to pf-color-red-100 and the cursor changes to error state.](/images/Card-drag-4-error.fd78ec0874490190.png)
View source on GitHub