在 Popper Bug 中拖放

Question

我有一个拖放菜单，当用户单击菜单图标时会加载该菜单。然后他们选择一个项目并将其移动到一个地方以对他们最喜欢的进行排序。如果我把它放在 Popper 之外，这个菜单就会加载并工作得很好。但在 popper 内部，当用户单击拖动时，当前元素将变得不可见。

这是我所拥有的样本

      <Popper>
          {({ TransitionProps }) => (
            <DragDropContext onDragEnd={this.onDragEnd}>
              <Droppable droppableId="droppable">
                {(provided, snapshot) => (
                    {icons.map((item, index) => (
                      <Draggable>

这些是我使用的软件包： https://www.npmjs.com/package/react-beautiful-dnd https://www.npmjs.com/package/@material-ui/core

Answer 1

开发人员提供了解决方案：

https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/portal/portal-app.jsx

我应用的解决方案是将左侧和顶部设置如下：

const getItemStyle = (isDragging, draggableStyle) => ({
  ...draggableStyle,
  left: "auto !important",
  top: "auto !important",
});

Answer 2

您可以在拖动时克隆项目。请参阅https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md