React 美丽的拖放不适用于 Material UI 组件

nitsir 发表于 Dev

尼齐尔

<DragDropContext>我用,<Droppable>和<Draggable>标签包裹了我的按钮。这是代码。

<DragDropContext>
  <Droppable droppableId="characters">
    {(provided, snapshot) => (
    <Stack
      direction="row"
      spacing="{1}"
      className="characters"
      {...provided.droppableProps}
      ref="{provided.innerRef}"
    >
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((x, index) => (
      <Draggable key="{x}" draggableId="{x}" index="{index}">
        {(provided, snapshot) => (
        <button
          variant="contained"
          ref="{provided.innerRef}"
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          {x}
        </button>
        )}
      </Draggable>
      ))}
    </Stack>
    )}
  </Droppable>
</DragDropContext>

https://drive.google.com/file/d/1VprPiCk-we5HVhvYzPPBEFdeHMX39BXC/view?usp=sharing

这是我得到的结果。[不可拖动的按钮列表]

czhang xi

您可以在这个问题中看到，Buttons cannot be used as custom drag handles

所以在你的情况下，你必须在按钮外面放一个 div 。而且，draggableId 应该是string.

<DragDropContext>
  <Droppable droppableId="characters">
    {(provided, snapshot) => (
      <Stack
        direction="row"
        spacing={1}
        className="characters"
        {...provided.droppableProps}
        ref={provided.innerRef}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8].map((x, index) => (
          <Draggable key={x} draggableId={`${x}`} index={index}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                <button variant="contained">{x}</button>
              </div>
            )}
          </Draggable>
        ))}
      </Stack>
    )}
  </Droppable>
</DragDropContext>;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。