时间戳

首页 > 解决方案 > 拖动子级时如何避免拖动父级？

javascript - 拖动子级时如何避免拖动父级？

问题描述

我已经添加到我的React应用导航栏，用户可以拖动项目和替换位置。（工作正常！）

现在我正在尝试递归地渲染导航树，因此可以拖动和替换内部导航（无需重新设置）。

递归渲染工作正常，但问题是拖动内部子节点会导致拖动整个父节点。

NodeWrapper.js：

export class NodeWrapper extends Component {
  public render() {
    return (
      <DragList onItemMoved={this.props.onItemMoved}>
        {this.props.navItems
          .map((component, index) => (
            <Node key={`node-${index}`} {...component}/>
          ))}
      </DragList>
    );
  }
}

Node.js：

public render() {
 return (
  <div>
    <span>{this.props.label}</span>
    {this.props.childNodes && (
      <NodeWrapper navItems={this.props.childNodes} />
    )}
  </div>
 );
}

*注意，DragList组件真的很大，我认为它与问题无关，如果被问到会添加。基本上，它呈现一个能够使用事件处理程序拖动它们的子列表。

我尝试event.stopPropagation()为拖动事件处理程序添加，但它仍然捕获并拖动整个父节点。

如何在所有级别之间执行拖动？

标签： javascriptreactjsdraggable

解决方案

推荐阅读