React-dnd: Sem rolagem automática ao arrastar

existe esta solução para react-dnd: https://github.com/azuqua/react-dnd-scrollzone
talvez este problema possa ser resolvido agora @darthtrevino

Por favor, desenvolvedores classificáveis, forneçam alguma solução para isso.

como usar você pode me procurar? @nossila

@AsceticBoy Não consigo fazer um trabalho melhor do que README, toneladas de exemplos aí

Eu fiz minha própria implementação disso. Basicamente, adicionou o listcontainer como um destino de descarte.

Usado: findDOMNode(component).getBoundingClientRect()
para saber quando eu estava em qualquer um dos lados do contêiner da lista

então: listContainerDOMNode.scrollLeft += someValue
para rolar a lista, o que rola o contêiner da lista.

É um bom começo, mas o problema é que, se o usuário segurar o ponteiro, nenhum evento de foco será acionado e a rolagem será interrompida.

Alguém resolveu isso, rolar o listcontainer quando o ponteiro está parado?

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

Eu sei que este é um tópico antigo, mas ainda aberto ...

Alguém configurou com sucesso react-dnd-scrollzone com WindowScroller de react-virtualized em conjunto. E se sim, você poderia compartilhar a implementação.

Estou usando uma combinação de WindowScroller , AutoSizer e List ; e não conseguiram fazer scrollzone funcionando corretamente.

Percebi que meu problema é que estou usando um scrollElement com WindowScroller , onde react-dnd-scrollzone define o contêiner como o elemento que envolve. Estou bifurcando para adicionar um suporte de elemento de rolagem personalizado.

Parece que react-dnd-scrollzone não funciona mais com o último react-dnd. A rolagem de arrasto IMO deve fazer parte do núcleo react-dnd.

Abaixo está minha solução:

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 esta ajuda. :sorriso:

Uma bifurcação atualizada de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funciona com versões mais modernas de react-dnd até e incluindo 7.0.2. Além dessa versão, o react-dnd moveu o DragDropContext produzindo este erro.

./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 Isso foi devido ao recurso CommonJS / ESModule, que provavelmente deveria ter sido um corte de versão principal (que pena!). Você pode encontrá-lo em react-dnd/lib/cjs/DragDropContext ou pode importá-lo do nível superior de react-dnd

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Alguém encontrou uma solução para trabalhar com a versão mais recente do react-dnd?

Uma bifurcação atualizada de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funciona com versões mais modernas de react-dnd até e incluindo 7.0.2. Além dessa versão, o react-dnd moveu o DragDropContext produzindo este erro.

./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 Você aplicou a correção sugerida por @darthtrevino ?

Como não consegui encontrar uma solução pronta para uso e algumas soluções não funcionam com a versão mais recente do react-dnd, eu mesmo encontrei uma solução: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Espero que ajude outra pessoa.

@orlandovallejos
Olá, poderia ser implementado neste exemplo de teste de estresse Sort? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

Tentei pouco, mas sem sucesso.

@ MartinN3 Aqui está meu amigo: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Você deve atualizá-lo para seus requisitos, deslocamento, contêineres div (provavelmente mais de 1), velocidade de rolagem (usando a variável PX_DIFF), etc.

Lembre-se de que o recurso de rolagem funciona fora da caixa no Chrome.

Como não consegui encontrar uma solução pronta para uso e algumas soluções não funcionam com a versão mais recente do react-dnd, eu mesmo encontrei uma solução: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Espero que ajude outra pessoa.

essa é a melhor solução. Muito obrigado pela solução :)