UI issues during drag

[TonyTroeff]

Expected behavior

I expect dragging to be as smooth as ordinary.

Actual behavior

However, when I start dragging anything located with a Callout, Panel or a Dialog (these all are components from Fluent UI) there is a strange offset that actually becomes bigger when the element is located more to the right of the screen.

Steps to reproduce

I have prepared two GIFs visualizing the problem.

Also, I have created a repository whit the minimum required for a valuable code sample representing the problem: https://github.com/TonyTroeff/issue-with-react-beautiful-dnd

What version of React are you using?

The code sample provided uses React v17.0.1, but I can ensure you that it behaves the same way in old versions too. The main project where this was found as an issue runs on v16.13.1

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

Both projects use latest version - 13.0.0

What browser are you using?

I tested this in all browsers that I could - Edge, Chrome, Firefox and Brave.

[rafinskipg]

Happens to me to

[totaldis]

see https://github.com/atlassian/react-beautiful-dnd/issues/128#issuecomment-669083882 for an unofficial work around

[TonyTroeff]

Hello! It's been almost two years. Are there any updates?

[R3D347HR4Y]

I had this problem, could not fix it so I created a component that smoothly follows the cursor that I set at the same level in the hierarchy as DragDropContext In my case items are imgs but you could just as easily use other types of components, make sure you can easily set the props of the item to use the correct item props maybe using redux or useState

const ImageFollowCursor = ({ src }) => {
  const mouseListener1 = (e) => {
    const circle = document.getElementById('circle');
    const left = e.clientX;
    const top = e.clientY;
    circle.style.transform = `translate(${left}px, ${top}px)`;
  };
  useEffect(() => {
    document.addEventListener('mousemove', mouseListener1);
    return () => {
      document.removeEventListener('mousemove', mouseListener1);
    };
  }, [src]);
  return (
    <img
      id="circle"
      aria-label="cursor"
      style={{
        display: 'none',
        objectFit: 'cover',
        borderRadius: '10px',
        opacity: 0.9,
        position: 'fixed',
        top: 0,
        left: 0,
        marginTop: '5px',
        marginLeft: '5px',
        width: '60px',
        height: '60px',
        pointerEvents: 'none',
        zIndex: 999999,
        transition: 'transform 0.1s',
        transform: 'translate(0, 0)'
      }}
    />
  );
};

And I modified the handlers onDragUpdate and onDragEnd like so

const onDragUpdate = (result) => {
    const circle = document.getElementById('circle');
    if (circle) {
      const draggingElement = mediaList.find((m) => m.id === result.draggableId);
      circle.src = draggingElement?.get('thumbnailUrl');
      circle.style.display = 'block';
    }
// Rest of the handler...
}

const onDragEnd = (result) => {
    const circle = document.getElementById('circle');
    if (circle) {
      circle.src = null;
      circle.style.display = 'none';
    }
// Rest of the handler...
}