拖放(React-Dragula)Reactjs

时间:2017-09-04 21:37:21

标签: javascript reactjs drag-and-drop react-dragula

我试图在Dragula-react drop之后更新反应组件中的状态。

我发现无法处理由Dragula做出的DOM更改的接缝,我得到“NotFoundError(DOM异常8):此处无法找到该对象。”

如果您只是改变顺序,一切都按预期工作,但通过在父母之间移动孩子,您会收到错误。

以下是example

这是重要的代码:

  handleDrop(el, target, source, sibling) {
    const newList = this.state.list.splice(0);
    const nodes = target.children;
    for (let i = 0; i < nodes.length; i++) {
      const ch = this.findItem(newList, nodes[i].id);
      if (ch) {
        ch.order = i;
        ch.parent = target.getAttribute('data-type');
      }
    }
    this.fix(newList);
    this.setState({list: newList});
  }

  fix(list) {
    for(let i=0; i<list.length; i++) {
        if (list[i].children) {
        for (let j=0; j<list[i].children.length; j++) {
            if (list[i].children[j].parent != list[i].id) {
            const fixItem = list[i].children[j];
            const index = list[i].children.findIndex(l => l.id == fixItem.id);
            list[i].children.splice(index, 1)
            const parent = list.find(p => p.id == fixItem.parent);
            parent.children.push(fixItem);
          }
        }
      }
    }
  }

感谢您的帮助!

0 个答案:

没有答案
相关问题