Вложенное перетаскивание с помощью react-beautiful-dnd
Я создаю вертикальное вложенное перетаскивание с помощью реагировать красиво-dnd. Я сослался на ответы в гитхабе
Я разветвился из песочницы и создал новую для вертикального вложенного перетаскивания. Когда я меняю внутреннее значение "Не беспокоить", внешнее значение "Не беспокоить" меняет значения, не входящие в "Не беспокоить".
КОД
onDragEnd(result) {
// dropped outside the list
console.info("innner drag");
if (!result.destination) {
return;
}
const items = reorder(
this.state.items,
result.source.index,
result.destination.index
);
this.setState({
items
});
}
ДЕМО Код: https://codesandbox.io/s/ozq53zmj6
Также совет: «draggableID» может быть любой строкой, какой захотите. Итак, если вы хотите, вы можете встроить всю информацию, чтобы идентифицировать перетаскиваемый контент как объект, затем JSON.stringify его и используйте как «draggableID». Это то, чем я сейчас занимаюсь, несмотря на то, что это вроде как не задумывалось. ^ _ ^
Тем, кто, как я, пришел из Google, обратите внимание, что полностью не связанные друг с другом DragDropContext вполне подойдут. Таким образом, у вас может быть DragDropContext внутри DragDropContext, и если вы не перетаскиваете между ними, это совершенно нормально.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
react-beautiful-dnd на данный момент не поддерживает вложенное перетаскивание и это элемент с низким приоритетом в соответствии с их дорожной картой. Вам нужно обрабатывать все на внешнем <DragDropContext onDragEnd = {this.handleDragEnd}>. По умолчанию он не предоставляет родительскую информацию в объекте result, поэтому я сохранил эту информацию в дочернем компоненте Droppable. См. Демонстрацию ниже, если это сработает для вас.
Код: https://codesandbox.io/s/jp4ow4r45v
Редактировать: Обратитесь к песочнице ниже для более общего фрагмента кода, где вы сможете применить вложенное перетаскивание через родительский контейнер.
Код: https://codesandbox.io/s/5v2yvpjn7n.
Во втором примере есть способ сделать элементы перетаскиваемыми между уровнями? Я хотел бы переместить subitem1 под root или items2 под подпункты items1. Или есть какая-нибудь другая библиотека, которая может добиться такого поведения DaD?
Во втором примере вы можете переупорядочить отдельные items, вы можете переупорядочить subItems внутри item, вы можете перетащить subItems с одного item на другой item. Если я правильно понял ваш вопрос, вы хотите переместить subItem из контейнера item2 в контейнер item1, и это возможно. Вы можете попробовать это в codesandbox
Я искал эта функциональность. Хотя этот пакет не идеален, потому что мне придется преобразовать мои данные в требуемый формат с помощью пакета, он делает то, что мне нужно.
Да, react-beautiful-dnd на данный момент не поддерживает вложенное перетаскивание, поэтому перенос всей логики в родительский - единственный вариант, оставшийся в этой библиотеке. Можете попробовать реагировать
Основываясь на этом втором примере, можно ли разрешить отбрасывание item между subitems и отбрасывание subitem между items?
просто укажите тип вашего внешнего и внутреннего сбрасываемого объекта, на конце перетаскивания вы должны проверить тип вашего сбрасываемого объекта и соответствующим образом изменить порядок.
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)
}
}
};
У меня тоже была та же проблема, и я также использовал response-beautiful-dnd, но со многими пользовательскими изменениями он работает, но не плавно, а затем я пришел, чтобы увидеть другой пакет с именем react-nestable, и он работает так, как мне нужно. Я помещаю ссылку на этот пакет ниже - реагирующий вложенный npm
В react-beautiful-dnd все события onDragEnd обрабатываются корневым DragDropContext. В настоящее время вложенный DragDropContexts не поддерживаются. В вашем файле ServiceCommandUnit.js вы фактически нигде не используете функцию
onDragEnd. Я бы порекомендовал поднять состояние ServiceCommandUnit.js до index.js и проверитьdroppableIdв результате, чтобы проверить, какой «список» следует обрабатывать каждый раз при вызовеonDragEnd.