0

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

Varinder Sohal
  • 1,142
  • 5
  • 24
  • 44

1 Answers1

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

Ashwin R
  • 744
  • 7
  • 14
  • Thank you for your answer but If subtasks moved into the main task then its not moving as a subtask. Please take a look again. – Varinder Sohal Mar 18 '21 at 06:02
  • @VarinderSohal Dragula needs a container as a drop zone. I have made changes to the to the code. https://codesandbox.io/s/spring-violet-ozlxh – Ashwin R Mar 18 '21 at 18:36