React-dnd: Sin desplazamiento automático al arrastrar

existe esta solución para react-dnd: https://github.com/azuqua/react-dnd-scrollzone
tal vez este problema podría cerrarse ahora @darthtrevino

Por favor, desarrolladores de Sortable, proporcionen alguna solución a esto.

como usarlo puedes buscarme? @nossila

@AsceticBoy No puedo hacer un mejor trabajo que el README, hay toneladas de ejemplos

Hice mi propia implementación de esto. Básicamente, agregó el contenedor de lista como un destino de destino.

Usado: findDOMNode(component).getBoundingClientRect()
para saber cuándo estaba a cada lado del contenedor de la lista

entonces: listContainerDOMNode.scrollLeft += someValue
para desplazarse por la lista, que desplaza el contenedor de la lista.

Es un buen comienzo, pero el problema es que si el usuario mantiene el puntero todavía, no se activa ningún evento de desplazamiento y, por lo tanto, el desplazamiento se detiene.

¿Alguien ha resuelto esto, desplazando el contenedor de la lista cuando el puntero está quieto?

@nossila ty! react-dnd-scrollzone funciona como encanto :)

Sé que este es un hilo antiguo pero aún está abierto ...

¿Alguien ha configurado correctamente react-dnd-scrollzone con WindowScroller de react-virtualized en conjunto? Y si es así, podría compartir la implementación.

Estoy usando una combinación de WindowScroller , AutoSizer y List ; y no he podido hacer que scrollzone funcione correctamente.

Me di cuenta de que mi problema es que estoy usando un scrollElement con WindowScroller , donde react-dnd-scrollzone establece el contenedor como el elemento que envuelve. Lo estoy bifurcando para agregar un elemento de desplazamiento personalizado.

Parece que react-dnd-scrollzone ya no funciona con la última versión de react-dnd. En mi opinión, el desplazamiento de arrastre debería ser parte del núcleo de react-dnd.

A continuación se muestra mi solución:

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
  }),
}

Espero que esto ayude. :sonrisa:

Una bifurcación actualizada de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funciona con versiones más modernas de react-dnd hasta la 7.0.2. Más allá de esa versión, react-dnd movió DragDropContext produciendo este error.

./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 Eso se debió a la función CommonJS / ESModule, que probablemente debería haber sido un corte de versión mayor (¡mi culpa!). Puede encontrarlo en react-dnd/lib/cjs/DragDropContext o puede importarlo desde el nivel superior de react-dnd

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

¿Alguien encontró una solución para trabajar con la última versión de react-dnd?

Una bifurcación actualizada de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funciona con versiones más modernas de react-dnd hasta la 7.0.2. Más allá de esa versión, react-dnd movió DragDropContext produciendo este error.

./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 ?

Como no pude encontrar una solución lista para usar y algunas soluciones no funcionan con la última versión de react-dnd, se me ocurrió una solución: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Espero que ayude a alguien más.

@orlandovallejos
Hola, ¿podría implementarse en este ejemplo de prueba de resistencia de Sort? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

Lo intenté poco pero sin éxito.

@ MartinN3 Aquí tienes a mi amigo: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Debe actualizarlo para sus requisitos, desplazamiento, contenedores div (probablemente más de 1), velocidad de desplazamiento (usando la variable PX_DIFF), etc.

Recuerde que la función de desplazamiento funciona desde el primer momento en Chrome.

Como no pude encontrar una solución lista para usar y algunas soluciones no funcionan con la última versión de react-dnd, se me ocurrió una solución: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Espero que ayude a alguien más.

Esta es la mejor solución. Muchas gracias por la solución :)