React Beautiful Drag and Drop

Question

I'm creating a draggable list with Drag and Drop elements, the problem is that the animation of the DND element is shifted from the pointer, causing problems with the dragging to an other drag and drop element. https://codesandbox.io/s/green-microservice-j7h9v?fontsize=14&hidenavigation=1&theme=dark here I coded an example of what I'm trying to achieve, it has some few other bugs that are not important.

Answer 1

First of all your index is not a string but an integer (Es: index={1}) and you should update the state to render the component. Use react hooks to update it or a class based component.

I'm sorry that I didn't write the working code but here's an example with a class based component.

https://codepen.io/alexreardon/project/editor/ZyNMPo

  onDragEnd (result) {
    // dropped outside the list
    if(!result.destination) {
       return; 
    }

    const items = reorder(
      this.state.items, 
      result.source.index, 
      result.destination.index
    );

    this.setState({
      items
    });
  }