Javascript 使用dnd进行嵌套拖放

我正在使用创建垂直嵌套拖放。我已经介绍了一些

我已经从沙盒中分叉，并为垂直嵌套拖放创建了一个新的沙盒。 当我更改内部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
    });
  }

---

演示代码：

反应漂亮的dnd目前不支持嵌套拖放，根据他们的路线图，它是低优先级项目。您需要处理外部

上的所有内容。默认情况下，它不会在

result

对象中提供父级信息，因此我将该信息保存在child

Droppable

组件中。如果这对您有效，请参阅下面的演示

代码：

编辑：请参阅下面的沙箱，以获取更通用的代码段，您可以在其中跨父容器应用嵌套拖放

---

代码：

只需为外部和内部可拖放文件指定类型，在拖动端，您必须检查可拖放文件的类型，并相应地重新排序

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

};

---

我也遇到过同样的问题，我也使用了react-beautiful dnd，但有许多自定义更改，它可以正常工作，但并不顺利，然后我看到了另一个名为react-nestable的包，它可以根据我的需要工作。我在下面为该包添加了一个链接-

在dnd中，所有onDragEnd事件都由根DragDropContext处理。目前，嵌套的DragDropContext。在ServiceCommandUnit.js文件中，您实际上没有在任何地方使用

onDragEnd

函数。我的建议是将ServiceCommandUnit.js的状态提升到index.js，并检查结果中的

droppableId

，以检查每次调用

onDragEnd

时应该处理哪个“列表”。此外，还有一个提示：“draggableID”可以是您想要的任何字符串。因此，如果您希望嵌入所有信息以将可拖动内容标识为对象，那么JSON.stringify将其作为“draggableID”使用。这就是我目前所做的，尽管这不是我的本意^_^对于像我这样来自谷歌的人，请注意彼此完全无关的

DragDropContext

s是完全可以的。因此，您可以在DragDropContext中有一个DragDropContext，如果您不在它们之间拖动，那么这完全可以。在第二个示例中，有没有一种方法可以使项目在级别之间拖动？我想移动根目录下的

subitem1

或

items2

下的

items1

子项。或者还有其他库可以实现这种DaD行为吗？在第二个示例中，您可以对单个

项

进行重新排序，您可以对

项

内的

子项

进行重新排序，您可以将

子项

从一个

项

拖放到另一个

项

。如果我正确理解了您的问题，您希望将

子项

从

item2

容器移动到

item1

容器，这是可能的。您可以在

codesandbox

中尝试，我正在寻找的是。虽然这个软件包并不理想，因为我必须通过软件包将数据转换为所需的格式，但它可以满足我的需要。是的

dnd

目前不支持嵌套拖放，这就是为什么将所有逻辑移到父级是这个库剩下的唯一选项。您可以基于第二个示例进行尝试，是否可以允许在

子项

之间删除

项

，并在

项

之间删除

子项

？