Вложенный Drag and Drop с реакцией-Beautiful-DDD

Question

Я создаю вертикальное вложенное перетаскивание с помощью Reaction-Beautiful-DDD .Я сослал несколько ответов в github

Я разветвился из песочницы и создал новый для вертикального вложенного перетаскивания.Когда я меняю внутренний DND, внешний DND изменяет значения, не входящие в DND.

CODE

 onDragEnd(result) {
    // dropped outside the list
    console.log("innner drag");
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    this.setState({
      items
    });
  }

DEMO Код: https://codesandbox.io/s/ozq53zmj6

Answer 1

просто дайте тип вашей внешней и внутренней пометке, на конце перетаскивания вы должны проверить тип вашей пометки и соответственно изменить порядок.

onDragEnd = ({ type, destination, source }) => {

    if (source && destination && type) {
        let parentId = source.droppableId;
        let srcIndex = source.index;
        let destIndex = destination.index;

        if (type == "Inner") {
            //method for reordering the order of the inner items
            reorderInner(parentId, srcIndex, destIndex)
        }
        else if (type == "Outer") {
            //method for reordering the order of parent items
            reorderOuter(srcIndex,destIndex)
        }
    }

};

Answer 2

react-beautiful-dnd на данный момент не поддерживает вложенное перетаскивание, и это элемент с низким приоритетом в соответствии с их дорожной картой.Вы должны обрабатывать все на внешнем <DragDropContext onDragEnd={this.handleDragEnd}>.По умолчанию он не предоставляет родительскую информацию в объекте result, поэтому я сохранил эту информацию в дочернем компоненте Droppable.См. Приведенную ниже демонстрацию, если это работает для вас.

Код: https://codesandbox.io/s/jp4ow4r45v

Редактировать: Обратитесь к песочнице ниже для более общего фрагмента кода, где вы сможетеприменить вложенное перетаскивание через родительский контейнер.

Код: https://codesandbox.io/s/5v2yvpjn7n