React-dnd: Kein automatischer Bildlauf beim Ziehen

es gibt diese lösung für react-dnd: https://github.com/azuqua/react-dnd-scrollzone
vielleicht könnte dieses Problem jetzt geschlossen werden @darthtrevino

Bitte Sortable-Entwickler, bieten eine Lösung dafür.

wie man es benutzt kannst du nach mir suchen? @nossila

@AsceticBoy Ich kann keinen besseren Job machen als es README ist, Tonnen von Beispielen dort

Ich habe meine eigene Implementierung davon gemacht. Grundsätzlich wurde der Listencontainer als Drop-Ziel hinzugefügt.

Verwendet: findDOMNode(component).getBoundingClientRect()
um zu wissen, wann ich auf beiden Seiten des Listencontainers war

dann: listContainerDOMNode.scrollLeft += someValue
um die Liste zu scrollen, die den Listencontainer scrollt.

Es ist ein guter Anfang, aber das Problem ist, dass, wenn der Benutzer den Zeiger noch hält, kein Hover-Ereignis ausgelöst wird und das Scrollen daher stoppt.

Hat jemand das gelöst, indem er den Listcontainer scrollt, wenn der Zeiger still steht?

@nossila ty! React-dnd-Scrollzone funktioniert als Charme :)

Ich weiß, das ist ein alter Thread, aber noch offen...

Hat jemand erfolgreich react-dnd-scrollzone mit WindowScroller von react-virtualized im Tandem eingerichtet. Und wenn ja, könnten Sie die Implementierung teilen.

Ich verwende eine Kombination aus WindowScroller , AutoSizer und List ; und konnten scrollzone richtig zum Laufen bringen.

Mir wurde klar, dass mein Problem darin besteht, dass ich ein benutzerdefiniertes scrollElement mit WindowScroller , wobei react-dnd-scrollzone Container als das umschlossene Element festlegt. Ich forke es, um eine benutzerdefinierte Scroll-Element-Requisite hinzuzufügen.

Sieht so aus, als ob response-dnd-scrollzone nicht mehr mit der neuesten Reaktion-dnd funktioniert. IMO Drag-Scrolling sollte Teil des React-dnd-Kerns sein.

Unten ist meine Lösung:

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

Ich hoffe das hilft. :Lächeln:

Ein aktualisierter Fork von scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funktioniert mit moderneren Versionen von response-dnd bis einschließlich 7.0.2. Über diese Version hinaus hat react-dnd den DragDropContext verschoben, was diesen Fehler verursacht.

./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 Das lag an der CommonJS/ESModule-Funktion, die wahrscheinlich eine Hauptversion hätte sein sollen (mein Fehler!). Sie finden es unter react-dnd/lib/cjs/DragDropContext oder Sie können es aus der obersten Ebene von react-dnd importieren

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Hat jemand eine Lösung gefunden, um mit der neuesten Version von React-dnd zu arbeiten?

Ein aktualisierter Fork von scrollzone (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) funktioniert mit moderneren Versionen von response-dnd bis einschließlich 7.0.2. Über diese Version hinaus hat react-dnd den DragDropContext verschoben, was diesen Fehler verursacht.

./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 Haben Sie den von @darthtrevino vorgeschlagenen Fix

Da ich keine Lösung out-of-the-box finden konnte und einige Lösungen mit der neuesten React-dnd-Version nicht funktionieren, habe ich mir selbst eine Lösung einfallen lassen: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Ich hoffe, es hilft jemand anderem.

@orlandovallejos
Hallo, könnte es in diesem Sort-Stresstest-Beispiel implementiert werden? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

Ich habe es wenig versucht, aber kein Erfolg.

@MartinN3 Hier hast du meinen Freund: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Sie müssen es für Ihre Anforderungen, Offset, div-Container (wahrscheinlich mehr als 1), Scrollgeschwindigkeit (mit der Variable PX_DIFF) usw. aktualisieren.

Denken Sie daran, dass die Scrollfunktion in Chrome sofort funktioniert.

Da ich keine Lösung out-of-the-box finden konnte und einige Lösungen mit der neuesten React-dnd-Version nicht funktionieren, habe ich mir selbst eine Lösung einfallen lassen: https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Ich hoffe, es hilft jemand anderem.

Dies ist die beste Lösung. Vielen Dank für die Lösung :)