Popper Bug 中的拖放

Question

我有这个拖放菜单，它会在用户单击菜单图标时加载。然后他们 select 一个项目并将其移动到一个地方以对他们最喜欢的进行排序。如果我把它放在 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",
});

Popper Bug 中的拖放

DragDrop inside Popper Bug

droppable

draggable

material-ui

react-beautiful-dnd