Перетаскивание в списке: какой порядок действительно меняется
При перетаскивании в отфильтрованном списке сначала определите, какой порядок меняется: полный набор, выбранная группа или только позиции видимых элементов. Индекс строки на странице не является её местом во всём наборе. Сохраняйте действие через устойчивые идентификаторы и проверяйте общий результат после повторного чтения, а не только красивую анимацию.
Один видимый результат скрывает два разных изменения
Учебный полный список имеет порядок А, Б, В, Г, Д, Е. Фильтр оставил А, В, Д. Пользователь переносит Д перед В и видит А, Д, В. Но что произошло со скрытыми Б и Г? Возможны разные осмысленные правила. Пока они не выбраны, интерфейс не может честно объяснить, какую перестановку подтвердил человек.
Первый вариант: переместить Д перед В в полном списке, сохранив относительный порядок остальных элементов. Получится А, Б, Д, В, Г, Е. Второй: поменять только содержимое прежних видимых позиций, оставив скрытые на их местах. Получится А, Б, Д, Г, В, Е. Видимая тройка одинакова, но после снятия фильтра пользователь увидит разный общий результат.
Зафиксировать область раньше алгоритма
Для внутреннего веб-приложения опишите назначение порядка: очередь задач, пользовательская подборка или общий каталог. Если порядок личный, изменение не должно незаметно переставлять работу всех сотрудников. Если он общий, права и конфликты должны соответствовать этому назначению. Нельзя решить вопрос одной библиотекой drag-and-drop.
В руководстве TanStack Table отдельно показано различие клиентской и серверной области обработки. Например, клиентская сортировка уже полученной серверной страницы затрагивает эту страницу, а не все подходящие строки. Это помогает увидеть ту же границу для перестановки: загруженный фрагмент не равен всему набору.
Матрица ожидаемого порядка
Во всех строках исходный учебный набор А, Б, В, Г, Д, Е. Это разные предлагаемые политики, а не утверждение, что одна команда должна одновременно давать несколько результатов. Для продукта выбирается и документируется согласованный вариант.
| Просмотр | Видимый набор | Действие | Политика | Ожидаемый полный порядок | Проверка |
|---|---|---|---|---|---|
| Весь список | А, Б, В, Г, Д, Е | Д перед В | Перемещение в полном наборе | А, Б, Д, В, Г, Е | Повторное чтение без другого критерия сортировки |
| Фильтр | А, В, Д | Д перед В | Привязка к В в полном наборе | А, Б, Д, В, Г, Е | Снять фильтр и проверить скрытых соседей |
| Тот же фильтр | А, В, Д | Д перед В | Перестановка только прежних видимых позиций | А, Б, Д, Г, В, Е | Скрытые Б и Г сохранили позиции по выбранному правилу |
| Отдельная страница | В, Г | Г перед В | Привязка к В в полном наборе | А, Б, Г, В, Д, Е | Перейти к соседним страницам и перечитать |
| Сортировка по отдельному полю | Порядок вычисляется по полю | Попытка ручной перестановки | В этом режиме действие запрещено по принятому интерфейсу | Ручной порядок не меняется | Понятное объяснение и переход к ручному режиму |
Ограничение библиотеки не является запретом для продукта
В Managed Row Dragging AG Grid описаны ограничения этого режима, включая пагинацию, сортировку и фильтрацию. Это конкретная реализация управления перетаскиванием. Из неё не следует, что любой продукт обязан запретить действие при фильтре. Если требуется иной сценарий, его контракт и обработку проектируют самостоятельно подходящими средствами.
При выборе режима оцените, что действительно делает компонент: перемещает локальные строки, сообщает события или управляет всем процессом. Не считайте библиотечную анимацию подтверждением изменения в серверном наборе. Иногда разумнее временно запретить неоднозначный режим и объяснить причину, чем сохранить случайную перестановку.
Команда на сервер должна сохранять намерение
Передайте идентичность элемента, область списка и выбранное отношение к устойчивому соседу либо другую однозначную модель положения. Значение«индекс 1» без контекста не объясняет, относится оно к странице, фильтру или полному набору. После переключения режима та же цифра может означать совсем другой элемент.
Проверьте актуальность области: элемент или сосед могли быть удалены, перенесены в другую группу или переставлены другим сотрудником. Сервер должен подтвердить допустимое действие и вернуть согласованное состояние либо понятный конфликт. Не восстанавливайте отсутствующего соседа догадкой и не применяйте команду к похожей строке.
Для интеграции порядка через API согласуйте повторы и разрешённые операции. Повторная доставка команды«передвинуть на одну позицию» может отличаться по смыслу от«поставить перед этим элементом». Выбирайте представление вместе с требованиями к повтору, а не после обнаружения двойного перемещения.
Сортировка по цене и ручная очередь — разные режимы
Если интерфейс сортирует строки по значению поля, произвольное перемещение противоречит этому критерию. Выберите поведение: перейти к ручному порядку, изменить само поле по отдельной операции либо запретить перенос в данном режиме. Не показывайте одновременно обещание«по алфавиту» и результат, который этому не соответствует.
Алгоритм хранения можно выбрать под объём и архитектуру: конкретные ранги, отношения или другой подход. Пользовательский договор от этого не должен меняться неожиданно. Не навязывайте дробные индексы как единственно правильное решение и не обещайте отсутствие конфликтов только из формы ключа.
После отпускания мыши работа ещё не закончена
Покажите состояние сохранения и результат сервера. При отказе нужно восстановить подтверждённый порядок либо перечитать его с понятным сообщением, сохранив объяснение действия. Если экран оставляет неподтверждённую анимацию, сотрудник может продолжить работу исходя из перестановки, которой на сервере нет.
В CRM это особенно заметно для очереди задач нескольких сотрудников. Проверьте повторный вход и параллельное изменение, а не только соседний запрос в том же окне. Сохранённый порядок должен соответствовать выбранной области пользователя или команды, а не случайному составу кеша текущей страницы.
Приёмка на скрытых строках
- Составьте небольшой учебный набор с устойчивыми идентификаторами и зафиксированным исходным порядком.
- Выберите политику фильтра и страницы. Рассчитайте полный результат каждой разрешённой перестановки до показа анимации.
- Выполните перенос в полном наборе, при фильтре и на отдельной странице. Снимите ограничения просмотра и сравните все элементы.
- Включите сортировку по полю и проверьте объявленное поведение режима. Подпись сортировки не должна противоречить результату.
- Испытайте отказ сохранения, повтор команды и исчезновение соседа. Сверьте подтверждённый порядок с интерфейсом.
- Перечитайте список новым запросом и другим разрешённым участником. Отличия должны объясняться настройкой области, а не потерей сохранения.
Вопросы и ответы
Почему drag-and-drop list меняет не тот общий порядок?
Перенос мог быть рассчитан по видимому фрагменту без согласованной области. Нужно определить судьбу скрытых строк и проверить полный набор после сохранения.
Почему AG Grid managed row dragging отключается при фильтре?
В этом режиме документация описывает соответствующее ограничение управления порядком. Оно относится к реализации библиотеки, а другой продуктовый контракт потребует собственной подходящей обработки.
Как совместить порядок, сортировку, фильтр и пагинацию таблицы?
Определите владельца обработки и область каждого действия. Ручной порядок и сортировка по полю должны иметь понятные режимы, а серверная перестановка не должна зависеть только от индекса строки текущей страницы.