Сохранять положение строки во время перетаскивания, когда другие строки свернуты ⇐ CSS

[Anonymous]

У меня есть перетаскиваемый/сортируемый список элементов-гармошек (или расширяемых строк), и я сворачиваю их все во время перетаскивания, чтобы пользователю было легче видеть, что они делают.Если я делаю это только для выбранной строки или если расширяются только строки ниже выбранной, то все работает нормально, но если над выбранной строкой есть расширенные строки, то выбранная строка перескакивает и это явно не очень удобно для пользователя.
Codesandbox: https://codesandbox.io/p/devbox/dnd-exp ... oll-x5nt7n
Проблема:


Я пытался просмотреть документацию и параметры конфигурации dnd-kit, чтобы узнать, есть ли способ решить эту проблему, но ничего не нашел. Возможно, я мог бы найти какие-нибудь волшебные трюки в исходном коде dnd-kit, но у меня нет для этого ни времени, ни навыков...
Я немного поэкспериментировал и нашел один потенциальный вариант. решение, которое может сработать, заключается в том, чтобы переместить свернутые аккордеоны (над выбранной строкой) ближе к мыши, добавив необходимое количество отступов сверху, сохраняя при этом кнопки на месте:


Чтобы протестировать хакерское решение, которое я придумал, раскомментируйте следующую строку в DraggableItem.tsx:

Код: Выделить всё

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

Примечание: работает только с развернутыми элементами 1 и 2.
Я вообще двигаюсь в правильном направлении? Я чувствую, что должен быть более простой и правильный способ сделать это.
На самом деле я больше думаю, что, возможно, этого вообще не следует делать... возможно, лучше UX скрыть только содержимое перетаскиваемой строки? Я также мог бы просто отключить перетаскивание, если какие-либо строки развернуты, но я не думаю, что это хороший UX, а отключение чего-либо обычно вредно для доступности.
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/784 ... -collapsed