Как избежать перетаскивания родителя при перетаскивании его ребенка? - PullRequest
Новая
       7

Как избежать перетаскивания родителя при перетаскивании его ребенка?

2 голосов
/ 10 июня 2019

Я добавил в панель навигации своего приложения 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() для обработчика событий перетаскивания, но он по-прежнему захватывает и перетаскивает весь родительский узел.

Как я могу выполнить перетаскивание между всеми уровнями?

...