Skip to content

docs(drag-and-drop): Updates design guidelines for accuracy. #4608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrew-ronaldson merged 1 commit into from
May 12, 2025
Merged

docs(drag-and-drop): Updates design guidelines for accuracy. #4608

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...site/patternfly-docs/content/design-guidelines/components/drag-and-drop/drag.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ import '../components.css';
![Example of a data list with items that can be dragged.](./img/dnd-simple1.svg)
</div>

2. **Bounding box:** Upon click & hold a `--pf-v6-global--active-color--100` border will show the draggable area that is available.
2. **Ghost item:** Upon click and hold, a duplicate "ghost" item with a `--pf-v6-global--active-color--100` border will appear "on top" of the list. This ghost item represents the initial item being moved.

3. **onDrag event:** The list item being dragged will also use a `--pf-v6-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.
3. **onDrag event:** While a ghost item is being dragged, the original item will move its position in the list to align with the hovered position.

<div class="ws-docs-content-img">
![Example of what happens when an item is dragged. A blue border appears around the item being dragged and a faded placeholder version stays in the original position.](./img/dnd-simple23.svg)
</div>

4. **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.
4. **postDrag event:** Once dropped, the ghost item will become an item in the list, which will be reordered based on the user’s action.

<div class="ws-docs-content-img">
![Example of what happens after an item is dragged. The item is dropped into the new position and the border color disappears. The faded placeholder item also disappears.](./img/dnd-simple4.svg)
Expand Down