React-dnd: Нет автопрокрутки при перетаскивании

есть это решение для response-dnd: https://github.com/azuqua/react-dnd-scrollzone
возможно, этот вопрос можно было бы закрыть сейчас @darthtrevino

Пожалуйста, разработчики с сортировкой, дайте какое-то решение для этого.

как пользоваться, ты можешь меня искать? @nossila

@AsceticBoy Я не могу сделать лучше, чем README, там масса примеров

Я сделал свою собственную реализацию этого. В основном добавлен listcontainer в качестве цели для перетаскивания.

Используется: findDOMNode(component).getBoundingClientRect()
чтобы знать, когда я был по обе стороны от listcontainer

затем: listContainerDOMNode.scrollLeft += someValue
для прокрутки списка, который прокручивает listcontainer.

Это хорошее начало, но проблема в том, что если пользователь удерживает указатель, событие зависания не запускается, и поэтому прокрутка останавливается.

Кто-нибудь решил это, прокручивая listcontainer, когда указатель все еще?

@nossila ty! react-dnd-scrollzone работает как шарм :)

Я знаю, что это старая ветка, но все еще открытая ...

Кто-нибудь успешно установил react-dnd-scrollzone с WindowScroller из react-virtualized в тандеме. И если да, не могли бы вы поделиться реализацией.

Я использую комбинацию WindowScroller , AutoSizer и List ; и не смогли заставить scrollzone работать правильно.

Я понял, что моя проблема в том, что я использую пользовательский scrollElement с WindowScroller , где react-dnd-scrollzone устанавливает его контейнер как элемент, который он оборачивает. Я разветвляю его, чтобы добавить настраиваемый элемент прокрутки.

Похоже, что response-dnd-scrollzone больше не работает с последней версией response-dnd. Прокрутка IMO с перетаскиванием должна быть частью ядра react-dnd.

Ниже мое решение:

const autoScrollInSafari = (step = 4) => (fn) => {
  const inSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (inSafari) {
    return function (p, m, c) {
      const scrollDOM = document.querySelector('.your-scroll-dom-class');
      if (scrollDOM) {
        const cursor = m.getClientOffset();
        const rect = scrollDOM.getBoundingClientRect();
        if (cursor.y - rect.top < 50) scrollDOM.scrollTop -= step;
        if (rect.bottom - cursor.y < 50) scrollDOM.scrollTop += step;
        if (cursor.x - rect.left < 50) scrollDOM.scrollLeft -= step;
        if (rect.right - cursor.x < 50) scrollDOM.scrollLeft += step;
      }
      fn.apply(this, [p, m, c]);
    };
  }

  return fn;
};

const myDropSpec = {
  drop() {
    // your drop callback
  },
  hover: autoScrollInSafari((props, monitor, component) => {
    // your hover callback
  }),
}

Надеюсь на эту помощь. :улыбка:

Обновленная вилка scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) работает с более современными версиями react-dnd до 7.0.2 включительно. Помимо этой версии, react-dnd переместил DragDropContext, вызвавший эту ошибку.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

@Soundvessel Это произошло из-за функции CommonJS / ESModule, которая, вероятно, должна была быть сокращена в основной версии (моя плохая!). Вы можете найти его в react-dnd/lib/cjs/DragDropContext или можете импортировать с верхнего уровня react-dnd

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Кто-нибудь нашел решение для работы с последней версией react-dnd?

Обновленная вилка scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) работает с более современными версиями react-dnd до 7.0.2 включительно. Помимо этой версии, react-dnd переместил DragDropContext, вызвавший эту ошибку.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

@Soundvessel Вы применили исправление, предложенное @darthtrevino ?

Поскольку я не мог найти решение из коробки, а некоторые решения не работают с последней версией response-dnd, я сам придумал решение: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Надеюсь, это поможет кому-то другому.

@orlandovallejos
Здравствуйте, можно ли это реализовать на этом примере стресс-теста сортировки? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

Я пробовал немного, но безуспешно.

@ MartinN3 Вот и мой друг: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Вы должны обновить его в соответствии с вашими требованиями, смещением, контейнерами div (возможно, более 1), скоростью прокрутки (с использованием переменной PX_DIFF) и т. Д.

Помните, что функция прокрутки работает в Chrome прямо из коробки.

Поскольку я не мог найти решение из коробки, а некоторые решения не работают с последней версией response-dnd, я сам придумал решение: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Надеюсь, это поможет кому-то другому.

Это лучшее решение. Большое спасибо за решение :)