Fix bug with window scroll container

[akhmadullin]

Problem

There were some issues about incorrect sorting behavior in grid list with enabled useWindowAsScrollContainer, for example, #577.

When prop useWindowAsScrollContainer is set to true, sorting in grid list does not work properly:

useWindowAsScrollContainer.bug.mp4

Solution

Such behavior is caused because of using root html element as scrolling container. Scrolling container's width is used for counting of new coordinates of list item during sorting. html element has width much more, than grid list container element, new coordinates counts wrong, that's why we can see incorrect sorting behavior.

This PR fixes issue with incorrect sorting by using width of grid container instead of using width of html element, where it's needed.

The result of this fix:

useWindowAsScrollContainer.bug.fixed.mp4

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 70b02b4:

Sandbox	Source
react-sortable-hoc-starter	Configuration

[lavish0000]

@akhmadullin , I want to fix this in my implementation, I don't know when this PR will be merged.
Do you have a fix that I can apply on my code directly ?
I would really appreciate this, If you could help me with this.

[akhmadullin]

@lavish0000, unfortunately, I don't.

I didn't find solution, that could fix this behavior and could be implemented directly in project, that uses react-sortable-hoc.

The only solution, that I found - fix behavior inside react-sortable-hoc.

@clauderic (author of the lib) direct all development efforts towards new lib - @dnd-kit, but maybe he will find some time to review this PR.

[lavish0000]

OK, Got it. Thanks @akhmadullin for the reply.