React-dnd: Pas de défilement automatique en faisant glisser

il y a cette solution pour réagir-dnd : https://github.com/azuqua/react-dnd-scrollzone
peut-être que ce problème pourrait être clos maintenant @darthtrevino

S'il vous plaît Développeurs triables, fournissez une solution à cela.

comment l'utiliser pouvez-vous me chercher? @nossila

@AsceticBoy Je ne peux pas faire un meilleur travail que c'est README, des tonnes d'exemples là-bas

J'ai fait ma propre mise en œuvre de cela. Fondamentalement, le listcontainer a été ajouté en tant que cible de dépôt.

Utilisé : findDOMNode(component).getBoundingClientRect()
pour savoir quand j'étais de chaque côté du listcontainer

puis : listContainerDOMNode.scrollLeft += someValue
pour faire défiler la liste, ce qui fait défiler le conteneur de liste.

C'est un bon début, mais le problème est que si l'utilisateur maintient le pointeur, aucun événement de survol n'est déclenché et le défilement s'arrête.

Quelqu'un a-t-il résolu ce problème en faisant défiler le conteneur de liste lorsque le pointeur est immobile ?

@nossila ty ! react-dnd-scrollzone fonctionne comme un charme :)

Je sais que c'est un vieux fil mais toujours ouvert...

Quelqu'un a-t-il réussi à configurer react-dnd-scrollzone avec WindowScroller partir de react-virtualized en tandem. Et si oui, pourriez-vous partager la mise en œuvre.

J'utilise une combinaison de WindowScroller , AutoSizer et List ; et n'ont pas été en mesure de faire fonctionner correctement scrollzone .

J'ai réalisé que mon problème est que j'utilise un scrollElement avec WindowScroller , où react-dnd-scrollzone définit le conteneur comme élément qu'il encapsule. Je le fais pour ajouter un accessoire d'élément de défilement personnalisé.

On dirait que react-dnd-scrollzone ne fonctionne plus avec le dernier react-dnd. Le défilement par glisser-déposer de l'OMI devrait faire partie du noyau de réaction-dnd.

Ci-dessous ma solution :

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

J'espère que cette aide. :le sourire:

Un fork mis à jour de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) fonctionne avec des versions plus modernes de react-dnd jusqu'à et y compris 7.0.2. Au-delà de cette version, react-dnd a déplacé le DragDropContext produisant cette erreur.

./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 Cela était dû à la fonctionnalité CommonJS/ESModule, qui aurait probablement dû être une version majeure (mon mauvais!). Vous pouvez le trouver à react-dnd/lib/cjs/DragDropContext ou vous pouvez l'importer à partir du niveau supérieur de react-dnd

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

Quelqu'un a-t-il trouvé une solution pour travailler avec la dernière version de react-dnd ?

Un fork mis à jour de scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) fonctionne avec des versions plus modernes de react-dnd jusqu'à et y compris 7.0.2. Au-delà de cette version, react-dnd a déplacé le DragDropContext produisant cette erreur.

./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 Avez-vous appliqué le correctif suggéré par @darthtrevino ?

Comme je n'ai pas trouvé de solution prête à l'emploi et que certaines solutions ne fonctionnent pas avec la dernière version de react-dnd, j'ai moi-même trouvé une solution : https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

J'espère que ça aidera quelqu'un d'autre.

@orlandovallejos
Bonjour, pourrait-il être implémenté sur cet exemple de test de stress de tri ? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

J'ai peu essayé mais sans succès.

@MartinN3 Voilà mon ami : https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Vous devez le mettre à jour en fonction de vos besoins, de l'offset, des conteneurs div (probablement plus de 1), de la vitesse de défilement (à l'aide de la variable PX_DIFF), etc.

N'oubliez pas que la fonction de défilement fonctionne immédiatement dans Chrome.

Comme je n'ai pas trouvé de solution prête à l'emploi et que certaines solutions ne fonctionnent pas avec la dernière version de react-dnd, j'ai moi-même trouvé une solution : https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

J'espère que ça aidera quelqu'un d'autre.

C'est la meilleure solution. Merci beaucoup pour la solution :)