react-draggable
react-draggable copied to clipboard
react-grid-layout
Use container offset in bounds computation
Hello,
When the bounds are provided as html selector, their computations doesn't use the container position. So the draggable can move in the selector area. The area size is the same than the selector moreover the position is different because the bounds don't use the selector offset.
I made the required changes and added a test.
I just spent a few hours tracking down why I couldn't my my div to drag partially offscreen to the left with a top: -200px on the bounding parent and tracked it down to this same thing. Really wish I had seen this PR before spending that time. Would love to see this get merged!
This depends on whether the containing element uses position: relative or not, yes? If so, there should be no need to use boundNode.offset{Left,Top} because the draggable's absolute position is relative to the container.
Yes if the container is a parent of the draggable element.
In my case of use, the draggable element is not a child of the html element pointed by the bounds.
Ok - this feature is intended for a situation where it is. This assumption can't be changed without breakage, unless you test if the bounding container is a parent and a new block context or not, then adjust the logic.
In my case, the draggable element is a child, however it is a distant child where there are other absolutely positioned elements in between. In my case, I wanted to set a div to be the size of the viewport with negative margins to allow the draggable to go slightly, but not fully, offscreen in all directions. This change fixed the issue for me, but it does seem like it should probably also first check that the bounding node's position is absolute first (wasn't an issue for my case but your argument makes sense).
It seems that we should perhaps accept a function as bounds, returning coords.
I can confirm that this is basically needed to work properly with CSS grids as well it seems.
Without this, react-draggable seems to think that the bounds of the parent were where the div was before being positioned by grid-row and grid-column on other divs within the grid because it causes the div with the draggables to be shifted around.
