Enable Multi-Tab Selection for Drag-and-Drop Reordering and Window Movement

[okaryo]

Description

• from twitter comment
• https://x.com/surblue/status/1855629425037201664
• 

[pmorch]

I took a little look at this, and it may not be completely straight-forward.

TabTabTab/develop/package.json shows dnd kit for React being used for Drag'n'drop functionality.

And there are multiple issues in dndkit asking about dragging multiple items:

• clauderic/dnd-kit #1303: "Question about dragging multiple items at once"
• clauderic/dnd-kit #644: "Multiple draggable at the same time?"

They both point towards pull request: clauderic/dnd-kit #588: "Add multi-select story by clauderic" from Jan '22, a pull request where the author wants to add a multi-drag example, but he never finished merging his own pull request for some reason. Also the example is not very clear to me at least (+219 −42 lines modified).

I also found clauderic/dnd-kit #901: "DragOverlay misplaced when sorting multiple elements" where if one uses clauderic/dnd-kit#588 on newer dnd-kit versions, there is some offset issue where dragging doesn't go to the correct place (or something with offset at least). There are two workarounds that apparently work. But as of today, that issue is still open, so I'm not sure.

Lastly, it looks like the dnd-kit author is currently doing a complete multi-year internal refactoring: clauderic/dnd-kit #1194: "future of library & maintenance" and somebody has tried using the multi-drag-n-drop example from clauderic/dnd-kit#588 with early versions of the refactored dnd-kit but it didn't work. No response yet on why it didn't work or how to get it working. (There is a good chance that the refactored code which will likely be a major version bump with other backwards incompatibilities anyway, so perhaps this isn't so bad or even surprising)

So all in all it looks like this might be possible to get working with clauderic/dnd-kit#588 but these are some things to be aware of at least.

[okaryo]

@pmorch
Thank you for sharing all this information—it’s really helpful and much appreciated!

I’m personally interested in atlassian/pragmatic-drag-and-drop, which was released last year. It seems to be small in size, performs well, and honestly, I just want to try it out. I also found an example for multi-select drag and drop: Pragmatic DnD Multi-Select Example.

That said, the current top priority is custom group rules(#369). Once that’s done and I’ve cleared other issues, I’d like to revisit this and decide on the approach moving forward.