Drag and drop

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.

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.

Bounding box: Upon click & hold a --pf-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-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.

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.

Error state: If the list item is dragged outside the bounding box the borders on the dragged item will switch to --pf-global--danger-color--100 and the cursor will change to not-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.

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.