Dragged element seems to be positioned in relation to wrong point

[ivellios]

Bug or feature request?

Bug

Expected behavior

When dragged, element should be visible and (probably) calculated in relation to the viewport or element it is inside of.

Actual behavior

I am using react-swipeable-views and when I put DragDropContext into the second view, dragged component is not being displayed properly. At first it looks as if it doesn't display at all or is hidden behind some elements, but I was able to find that it is being dragged on the first tab instead. Just as if it would use wrong relative location for dragging.

This may as well be a problem with react-swipeable-views, but since it is drag&drop item disappearing, I think it would be good to solve it in here.

Steps to reproduce

I have it reproduced in code on Codesandbox. As you can see, I am using the simple example for horizontal drag&drop and basic use of swipeable view.

To see the element comming from the left panel:

1. Resize your browser to have some free space outside it to the right.
2. Go to: https://wwm3727x5.codesandbox.io/
3. Click on "Go to tab 1"
4. Pick the leftmost item and drag mouse cursor to the right, outside the browser
5. The element will enter from the left side.

What version of React are you using?

16.4.1

What version of react-beautiful-dnd are you running?

9.0.0

What browser are you using?

Google Chrome 67.0.3396.99

Demo

https://codesandbox.io/s/wwm3727x5

If needed I can provide video of the behaviour but AFAIK this is happening on all platforms.

[yankopetrov]

Same problem here.

I have a sidebar with transfrom: translateX(120px) + 15px padding-left and when start dragging, the component calculate this as left position, but ignore that it is already in relative position container, so the display position of 135px is wrong.

[alexreardon]

Have you tried using a portal?

[yankopetrov]

This means that if you have a transform: * on one of the parents of a Draggable then the positioning logic will be incorrect while dragging. Lame! For most consumers this will not be an issue.

If you have animations is bad idea to do it with position and your performance will drop a lot. I have to keep transform for my animations...

Unfortunately it has a big performance penalty - especially when dragging nodes with a lot of children

Can't use react portal, because i have more than 200 items in the list :(

I patch it by forcing dragging element left position to 15px with !important, but will be happy if at some point there is general solution :)

[ivellios]

@alexreardon - you are right. Using Portal helped a lot. I have updated my code sandbox with it. Thank you for the assistance 👍

[ivellios]

OK, that worked fine for desktop, but now it looks like moving items on mobile (touch device) don't work. You can see in the demo https://wwm3727x5.codesandbox.io/ with mobile version open.

Do you think it is the same as #582 ? Because it seems to be, since I am using Portal as well.

[alexreardon]

Yes, it is an issue with portals. We are investigating a work around for users of portals