Блог

Я создал перетаскиваемую таблицу перетаскивания с перетаскиваемыми строками.

Для нужд моего проекта я добавил несколько целевых объектов с несколькими удаляемыми элементами, как в этом примере: https://codesandbox.io/s/ql08j35j3q

Это работает довольно хорошо, но есть одна проблема-скорость прокрутки.
Когда я пытаюсь поместить элемент в элемент в нижней части страницы, это происходит очень медленно.

Этот GIF покажет проблему.

У вас есть какие-нибудь подсказки для решения ?

Это может быть результатом автоматической прокрутки react-beautiful-dnd, нарушающей свойство css, называемое поведением прокрутки. Я только что провел день, снимая это сам.

1. Если вы используете bootstrap, по умолчанию для начальной загрузки задается {scroll-behavior: smooth} весь html-тег. Чтобы применить быструю автоматическую прокрутку react-beautiful-dnd, это свойство css должно быть {scroll-behavior: unset !important}
2. Если вы не используете bootstrap или другую библиотеку, проверьте таблицы стилей css и посмотрите, {scroll-behavior: smooth} установлены ли где-либо в родительских контейнерах для ваших выпадающих файлов, и снимите их.

Хороший способ отладить это-также открыть элемент Inspect в вашем браузере и просмотреть стили, применяемые к html, телу или родительским контейнерам для ваших выпадающих файлов.

Похоже, что, когда поведение прокрутки определено в css или javascript( если вы используете window.scrollBy() ), это может помешать функции быстрой автоматической прокрутки react-beautiful-dnd и замедлить ее.

Дайте мне знать, если это сработает для вас 🙂 !

Вот мой пример в формате gif — Все контейнеры в столбце являются выпадающими