How to avoid dragging the parent when dragging it's child?

user_8276475 0
Viewed 406

I've added to my React app navigation bar which the user can drag items and replace positions. (Works fine!)

Now I'm trying to render recursively the navigation tree, so inner navigations can be dragged and replaced (no reparenting).

Rendering recursively works fine, but the problem is dragging an inner child causes dragging the whole parent node.

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>
 );
}

*Note, the DragList component is really huge, and I don't think that it's relevant to the question, will add if asked. Basically it renders a list of children with ability to drag them with event handler.

I've tried to add event.stopPropagation() for the drag event handler, but it still captures and drags the whole parent node.

How can I perform drag between all levels?

reactjs draggable javascript
1 Answers

on inner child element on every eventl listener you want like onDrag and onClick use e.stopPropagation()

for example

<div class="wraper">
  <div class="inner" onDrag={(e)=>{e.stopPropagation();//do other sttuf}}></div>
</div>

just use event.stopPropagation() inside inner child event handler of drag,... event listener

i can not see your implementation to figure out how you use drag events.but i'm gussing that you use onItemMoved prop and pass it's value to drag handler so try this

onItemMoved={(e)=> {e.stopPropagation();this.props.onItemMoved()}}
user_187363590
Related