React beautiful DnD drag out of position problem

A similar thing happened to me while using react-beautiful-dnd. In my case, the reason was that I had two items which had the same id.

I had the same issue and I figured it out! :-)

The solution can be found here: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/using-a-portal.md

Basically when the library is using position: fixed as OP mentioned, there are are some unintended consequences sometimes - and in those cases you need to use portal.

I got it to work by looking at the portal example here: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/portal/portal-app.jsx

solution found thanks to this comment: https://github.com/atlassian/react-beautiful-dnd/issues/485#issuecomment-385816391

I had the same position problem when I try to show react-beautiful-dnd inside react-modal and I found a solution by adding these CSS to draggable items.

.draggable {
  top: auto !important;
  left: auto !important;
}