Nested drag and drop with react dragula

Question

I am working on a react project and I want to drag tasks to their subtasks with react Dragula like nestable.

Code:

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>

I created simple drag and drop with the above-mentioned code but I need to drag tasks in subtasks and their subtasks so on. So please suggest to me how I can achieve what I want

Answer 1

Go for native library https://github.com/bevacqua/dragula

You can use class "nested" for the nested elements.

className="nested"

And find ".nested" using the query selector.

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

This is a working demo https://codesandbox.io/s/spring-violet-ozlxh