reactjs - 使用 React Dragula 进行嵌套拖放

Question

我正在处理一个反应项目，我想将任务拖到他们的子任务中，并使用 react Dragula like 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