嵌套的反应拖放-漂亮-dnd
嵌套的反应拖放-漂亮-dnd
提问于 2018-10-15 09:50:14
我正在用反应-美丽-dnd创建垂直嵌套拖放。我已经介绍了一些github中的答案
我已经从沙箱分叉，并创建了新的垂直嵌套拖放。当我更改内部DND时，外部DND更改不位于DND内的值。
码
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
});
}回答 4
Stack Overflow用户
回答已采纳
发布于 2019-03-03 14:46:37
从现在起，react-beautiful-dnd不支持嵌套拖放，而且按照他们的路线图，它是低优先级项。您需要处理外部<DragDropContext onDragEnd={this.handleDragEnd}>上的所有内容。默认情况下，它不会在result对象中提供父级信息，因此我将该信息保存在子Droppable组件中。如果这对你有用的话，请看下面的演示。
代码：https://codesandbox.io/s/jp4ow4r45v
编辑：在沙箱下面引用一个更通用的代码片段，您可以在其中跨父容器应用嵌套的拖放。
Stack Overflow用户
发布于 2019-03-19 12:50:20
只需给您的外部和内部可下垂类型，在拖曳端您必须检查您的类型，并相应地重新排序。
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)
}
}
};Stack Overflow用户
发布于 2022-08-24 10:13:30
@debajit的回答很有魅力。我用FC和=> https://codesandbox.io/s/nested-dnd-across-parent-forked-p7ijli更新了他的代码，使其成为最新的react版本(18.2.0)和最新的react漂亮的dnd (13.1.0)版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52814011
复制相关文章
相似问题
腾讯云开发者
