adobe / adobe/react-spectrum

Support single item (regardless of selection) drag and drop reordering in GridList

Open
#7,449 0 comments 5 reactions 0 assignees View on GitHub
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:
![image](https://github.com/user-attachments/assets/a52e7179-c276-40f2-b532-613778265ea9)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.