-
-
Notifications
You must be signed in to change notification settings - Fork 634
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RectIntersection is not working with draggable items inside a scrollable container #43
Comments
Hey @jeserodz, seems like a legit bug, thanks for the report! |
For the time being, you can use the |
In my issue (#73 you closed for duplicate), FYI, I do reproduce the bug even with others collisions algorithm. closestCorners / closestCenter are doing the same. |
is the #54 usable ? i have the same kind of bug after scrolling a long list |
Not sure if this bug is the cause for the following as well: https://codesandbox.io/s/confident-pike-ofooi
Note: this doesn't use @dnd-kit/sortable, as it's not necessary for my particular use case. dnd-kit-scroll-bug.mp4 |
First of all thanks for building such a developer friendly DnD library @clauderic We are building a kanban board and our first choice naturally went towards using react-beautiful-dnd and after trying out that, we end up facing this issue atlassian/react-beautiful-dnd#131 and then we have to remove the package as it is not gonna be solved anytime soon. After searching for other libraries, we found I saw you are working on #54 Will this solve this issue? I am open to discuss this and support it further with your help and guidance. |
Hey @Shajansheriff , that example only works because height is fixed right? |
+1 As a solution, (or at least a temporary solution), it'd be just awesome to be able to remove certain scrollable ancestors from position calculation. Obviously, intersection is calculated using a concatenation of body scrollTop and the left panel scrollable block scrollTop. I don't need left scrollable block to be scrolled at all here, would be great to just remove it from either calculations, and scrollable items as well 2021-06-27-01-38-56_rMVI6sw8.mp4 |
+1 I'm facing this exact bug today with the virtualized scrollable container using react-window library. Just informing this bug also occurs in the virtualized containers. For now, the workaround I could think of is locating the |
@clauderic like others have said, thank you for making this amazing dnd library! We're running into this issue, are there any updates on PR 54 or any accepted workarounds in the meantime? Thank you! |
Thanks for your great Lib, |
Probably cause it's not using the default collision detection #43 (comment). |
Hi I wonder if there's an update on this ticket? The branch at #54 seems to have gone stale. I have a workaround with a different collision detector which uses the current active item rather than the
|
Hi all, @robstarbuck's comment helped me to find a workaround that works perfectly for my use case:
|
Thanks! |
Hi. I used @robstarbuck's algorithm but my active lost its offset in a long list while scrolling and then I did this :
I use active to calculate the intersection ratio with the scrollable container and the collisionRect with the other elements. This works for my use case. I hope it helps |
I'm having the same issue. how can I fix drag issue on scrollable container? |
I made it work with I've added a common import {
// ...
rectIntersection,
CollisionDetection,
} from '@dnd-kit/core';
// ...
const MainComponent = () => {
const mousePosition = useRef({x: 0, y: 0});
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
mousePosition.current = {x: event.clientX, y: event.clientY};
};
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
const collisionDetection: CollisionDetection = (args) => {
const nodesAtPosition = document.elementsFromPoint(
mousePosition.current.x,
mousePosition.current.y,
);
const droppableId = nodesAtPosition.find((node) =>
node.classList.contains('droppable-zone'),
)?.id;
if (droppableId) {
return droppableId;
}
// fallback to default collision detection algorithm
return rectIntersection(args);
};
return (
<DndContext
// ...
collisionDetection={collisionDetection}
>
{/* ... */}
</DndContext>
)
}; |
The draggable items that are scrolled are not calculating the
intersectionRatio
correctly.Please, see this code sandbox for an example: https://codesandbox.io/s/react-dnd-grid-0ylzl?file=/src/App.js
NOTE: Try dragging the last draggable item into one droppable area.
The text was updated successfully, but these errors were encountered: