物品不可拖动

Question

我将名为react-beautiful-dnd的库用于可拖动列表。我的应用程序的用例是会有一个嵌套列表，该列表应该是可拖动的，并且其对应列表中的项目也应该是可拖动的。来自List1的项目不应拖到List2。为此，我试图创建不起作用的可拖动垂直列表。这些项目完全不可拖动。我已经为此创建了一个沙箱。

在这里

https://codesandbox.io/s/vqzx332zj7

源代码是

import DraggableSubItems from "./DraggableSubItems";

const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

const items = [
  {
    id: 1,
    name: "Top Level",
    path: "top-level",
    children: [
      {
        id: 1,
        name: "dropbox",
        path: "dropbox"
      },
      {
        id: 2,
        name: "asana",
        path: "asana"
      }
    ]
  },
  {
    id: 2,
    name: "Frontend Library",
    path: "frontend-library",
    children: [
      {
        id: 1,
        name: "reactjs",
        path: "reactjs"
      },
      {
        id: 2,
        name: "vuejs",
        path: "vuejs"
      }
    ]
  }
];

const grid = 8;

const getListStyle = () => ({
  padding: grid,
  display: "flex",
  flexDirection: "column"
});

class DraggableItems extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items
    };
  }

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

    if (result.destination.index === result.source.index) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );
    console.log("items", items);
    this.setState({
      items
    });
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => {
            console.log("provided", provided, snapshot);
            return (
              <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {this.state.items.map(item => (
                  <Draggable
                    key={item.id}
                    draggableId={item.id}
                    index={item.id}
                  >
                    {(draggableProvided, draggableSnapshot) => {
                      console.log(
                        "provided inside Draggable",
                        draggableProvided,
                        draggableSnapshot
                      );
                      return (
                        <React.Fragment>
                          <div
                            ref={draggableProvided.innerRef}
                            {...draggableProvided.draggableProps}
                            style={getListStyle(
                              draggableSnapshot.isDragging,
                              draggableProvided.draggableProps.style
                            )}
                            {...draggableProvided.dragHandleProps}
                          >
                            <h3>{item.name}</h3>
                            <DraggableSubItems
                              subitems={item.children ? item.children : []}
                              type={item.id}
                            />
                          </div>
                          {draggableProvided.placeholder}
                        </React.Fragment>
                      );
                    }}
                  </Draggable>
                ))}
              </div>
            );
          }}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default DraggableItems;