Support single item (regardless of selection) drag and drop reordering in GridList
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
I've been following the instructions for a re-orderable `GridList` with drag and drop here: https://react-spectrum.adobe.com/react-aria/GridList.html#reorderable
However, it took me a while to realize that the drag+drop reordering behavior expects a _set_ of selected items to be reordered. As in, it moves all the selected items, not just the item "grabbed" to be dragged.
I'm not sure if it makes sense generally, but it would be very helpful to my use case if there were a mode/setting/approach that only reordered the single item picked up by the drag event, not the whole selection.
I'm attempting to build a UI for controlling the visibility state and order state of columns in a data table:

The `GridList` selection state controls the column visibility, and I'd like to decouple that from the draggable items, so the user can reorder columns one at a time.
### 🤔 Expected Behavior?
Could it be possible to decouple the selected items from the drag behavior? So when dragging items, instead of moving the entire selection set, only moving the item that was "picked up"? Maybe this could be an additional mode or a setting?
### 😯 Current Behavior
Currently, the reordering/dragging moves the entire selection set, not just the single item that was "picked up"
### 💁 Possible Solution
_No response_
### 🔦 Context
(see above)
### 💻 Examples
_No response_
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the reorderable GridList documentation and the current drag-and-drop behavior described in the issue. Determine how selection is coupled to dragging, then define and implement a mode that moves only the picked-up item; done means a selected set remains intact while a dragged item reorders independently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100