0

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.

Federico Leuze
  • 43
  • 1
  • 7

1 Answers1

2

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
    });
  }
Andi Marius
  • 21
  • 1
  • My problem is that if I have a DND element inside a react draggable component, than the animation get shifted, I can solve the other bugs in the sandbox – Federico Leuze Feb 06 '20 at 10:46