In React beautiful DnD Dragged element is floating over the entire page (position: fixed) and prevent all click events in page

Question

Dragged element is floating over the entire page (position: fixed) and prevent all click events in page (im unable to drop the element i dragged for some reason). However when i worked in sandbox the page doesnt freeze or the dragged element donot stay fixed to a position . Instead it goes back to the position where i dragged it from. sharing what i have tried on codeSandbox.

codesandbox URL :https://codesandbox.io/s/optimistic-bas-pl2gut?file=/src/components/Users.js

Answer 1

We have to use an onDragEnd event in the DragDropContext component and update the users array for the position change to appear.

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(users);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    setUsers(items);
  }