Вложенное перетаскивание с реактивным перетаскиванием

Question

Я работаю над реакционным проектом, и я хочу перетаскивать задачи в их подзадачи с помощью React Dragula, как nestable .

Код:

      dragulaDecorator = (componentBackingInstance) => {
   if (componentBackingInstance) {
      this.containers.push(componentBackingInstance)
   }
};
componentDidMount() {
   this.isMount = true;
   let tasks = this.props.tasks
   this.setState({ allTasks: tasks})
   this.drake = dragula(this.containers, {
      isContainer: function (el) {
         return el.id === 'single-task';
      },
      moves: function (el, source, handle, sibling) {
         return handle.classList.contains('icon-handle');
      }
   });
}

<ul className="tjs-list list-unstyled single-task" ref={this.dragulaDecorator}>
   {this.state.allTasks && (this.state.allTasks.length > 0) && this.state.allTasks.map((field, key) => {
      return (
         <li key={key}>
            <h4>
               <i className="tjsicon-sort icon-handle"></i>
               {field.name}
            </h4>
         </li>
      )
   })}
</ul>

Я создал простое перетаскивание с помощью вышеупомянутого кода, но мне нужно перетаскивать задачи в подзадачи и их подзадачи и так далее. Так что, пожалуйста, подскажите мне, как я могу достичь того, чего хочу

Answer 1

Перейдите на родную библиотеку https://github.com/bevacqua/dragula

Вы можете использовать класс «вложенный» для вложенных элементов.

      className="nested"

И найдите ".nested" с помощью селектора запросов.

      [].slice.apply(document.querySelectorAll(".nested"))

Это рабочая демонстрация https://codesandbox.io/s/spring-violet-ozlxh