当其他行折叠时，在拖放过程中保持行位置

Question

我有一个可拖动/可排序的手风琴项目（或可扩展行）列表，并且我在拖放过程中折叠所有这些项目，以便用户更容易看到他们在做什么。

如果我仅对所选行执行此操作，或者仅展开所选行下方的行，则一切正常，但如果所选行上方有任何展开的行，则所选行会向上跳跃，这显然不是良好的用户体验。

问题：

我尝试查看 dnd-kit 文档和配置选项，看看是否有办法解决这个问题，但我找不到任何东西。也许我可以在 dnd-kit 源代码中找到一些神奇的技巧，但我没有时间或技能来做到这一点......

我进行了一些实验，发现了一个可行的潜在解决方案，基本上是通过在顶部添加适量的填充来将折叠的手风琴（所选行上方）移动到更靠近鼠标的位置，从而将按钮保持在适当的位置：

要测试我提出的 hacky 解决方案，请取消注释

DraggableItem.tsx

中的以下行：

paddingTop: hideContent && index === 0 ? "168px" : undefined,

注意：仅适用于扩展的项目 1 和 2。

我的方向正确吗？我觉得必须有一种更简单、更正确的方法来做到这一点。

我实际上更觉得也许根本不应该这样做......也许只隐藏正在拖动的行的内容更好的用户体验？如果扩展了任何行，我也可以禁用拖放，但我认为这不是很好的用户体验，并且禁用任何内容通常不利于可访问性。

谢谢！

Answer 1

我们决定在 dnd 期间不折叠其余的行/手风琴，因为这对用户来说不太可能成为问题，但我将发布我想出的解决方法，以防其他人感兴趣：

我能想到的唯一可靠的解决方案是总结所有展开行的“子组件”的高度，并将其用作整个列表的顶部填充，从而使按钮保持在原位。如果有人有更好的解决方案，请随时发布，我将标记这个问题的最佳、最简单的解决方案。