Реагировать красивые перетаскивания

Question

Я создаю перетаскиваемый список с элементами Drag and Drop, проблема в том, что анимация элемента DND смещена от указателя, что вызывает проблемы при перетаскивании на другой элемент перетаскивания. https://codesandbox.io/s/green-microservice-j7h9v?fontsize=14&hidenavigation=1&theme=dark здесь я привел пример того, чего я пытаюсь достичь, у него есть несколько других ошибок, которые не важны.

Answer 1

Прежде всего, ваш индекс - это не строка, а целое число (Es: index = {1}), и вы должны обновить состояние, чтобы отобразить компонент. Используйте ответные хуки, чтобы обновить его или компонент на основе классов.

Извините, что я не написал рабочий код, но вот пример с компонентом на основе классов.

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