反应漂亮的拖放效果

Question

我正在使用拖放元素创建可拖动列表，问题是DND元素的动画已从指针移动，从而导致拖动到另一个拖放元素的问题。 https://codesandbox.io/s/green-microservice-j7h9v?fontsize=14&hidenavigation=1&theme=dark 在这里，我编写了一个示例，说明了我要实现的目标，它还有一些其他不重要的错误。

Answer 1

首先，您的索引不是字符串，而是整数（Es：index = {1}），您应该更新状态以呈现组件。使用react挂钩更新它或基于类的组件。

很抱歉，我没有编写有效的代码，但这是基于类的组件的示例。

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
    });
  }