React-dnd: Tidak ada gulir otomatis saat seret

ada solusi ini untuk react-dnd: https://github.com/azuqua/react-dnd-scrollzone
mungkin masalah ini bisa ditutup sekarang @darthtrevino

Silakan pengembang yang dapat diurutkan, berikan beberapa solusi untuk ini.

bagaimana cara menggunakannya, bisakah Anda mencari saya? @nossila

@AsceticBoy Saya tidak bisa melakukan pekerjaan yang lebih baik daripada README, banyak contoh di sana

Saya melakukan implementasi saya sendiri untuk ini. Pada dasarnya menambahkan listcontainer sebagai Target Drop.

Digunakan: findDOMNode(component).getBoundingClientRect()
untuk mengetahui kapan saya berada di kedua sisi listcontainer

lalu: listContainerDOMNode.scrollLeft += someValue
untuk menggulir daftar, yang menggulir wadah daftar.

Ini awal yang baik tetapi masalahnya adalah jika pengguna menahan penunjuk tetap tidak ada acara hover yang dipicu dan pengguliran berhenti.

Adakah yang memecahkan ini, menggulir listcontainer saat penunjuk masih?

@nossila y ! react-dnd-scrollzone berfungsi sebagai pesona :)

Saya tahu ini adalah utas lama tetapi masih terbuka ...

Adakah yang berhasil mengatur react-dnd-scrollzone dengan WindowScroller dari react-virtualized secara bersamaan. Dan jika demikian, dapatkah Anda membagikan implementasinya.

Saya menggunakan kombinasi WindowScroller , AutoSizer dan List ; dan belum bisa membuat scrollzone bekerja dengan benar.

Saya menyadari bahwa masalah saya adalah saya menggunakan scrollElement kustom dengan WindowScroller , di mana react-dnd-scrollzone menetapkan wadah sebagai elemen yang dibungkusnya. Saya memotongnya untuk menambahkan prop elemen gulir khusus.

Sepertinya react-dnd-scrollzone tidak lagi berfungsi dengan react-dnd terbaru. Pengguliran seret IMO harus menjadi bagian dari inti reaksi-dnd.

Di bawah ini adalah solusi saya:

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

Semoga bantuan ini. :senyum:

Garpu scrollzone yang diperbarui (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) berfungsi dengan versi react-dnd yang lebih modern hingga dan termasuk 7.0.2. Di luar versi itu, react-dnd memindahkan DragDropContext yang menghasilkan kesalahan ini.

./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 Itu karena fitur CommonJS/ESModule, yang mungkin seharusnya menjadi potongan versi utama (buruk!). Anda dapat menemukannya di react-dnd/lib/cjs/DragDropContext atau Anda dapat mengimpornya dari level atas react-dnd

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

Adakah yang menemukan solusi untuk bekerja dengan versi terbaru react-dnd?

Garpu scrollzone yang diperbarui (https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone) berfungsi dengan versi react-dnd yang lebih modern hingga dan termasuk 7.0.2. Di luar versi itu, react-dnd memindahkan DragDropContext yang menghasilkan kesalahan ini.

./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 Apakah Anda menerapkan perbaikan yang disarankan @darthtrevino ?

Karena saya tidak dapat menemukan solusi di luar kotak, dan beberapa solusi tidak berfungsi dengan versi react-dnd terbaru, saya membuat solusi sendiri: https://Gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Saya harap ini membantu orang lain.

@orlandovallejos
Halo, bisakah itu diterapkan pada contoh uji stres Sortir ini? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

Saya mencoba sedikit tetapi tidak berhasil.

@MartinN3 Di sini Anda punya teman saya: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

Anda harus memperbaruinya untuk kebutuhan Anda, offset, wadah div (mungkin lebih dari 1), kecepatan gulir (menggunakan variabel PX_DIFF), dll.

Ingat fitur pengguliran berfungsi di luar kotak di Chrome.

Karena saya tidak dapat menemukan solusi di luar kotak, dan beberapa solusi tidak berfungsi dengan versi react-dnd terbaru, saya membuat solusi sendiri: https://Gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

Saya harap ini membantu orang lain.

Ini adalah solusi terbaik. Terima kasih banyak atas solusinya :)