拖动时，反应良好的dnd不'；t在material-ui-next.com持久抽屉中显示可拖动项目

我有一个文件夹，里面有一个可拖放的列表。该功能存在，但在拖动项目时，不会显示正在拖动的项目。我可以完美地拖动该项，并且正在分配空间，包括dnd框架预期的动画，我只是看不到我正在拖动什么。如果我把抽屉换成一个永久的抽屉，一切都会正常工作。有什么建议吗

我的组件（在原型代码中）： （DragDropContext在父组件中声明）

从“React”导入React；
导入{分隔器，抽屉，图标按钮，列表，列表项，纸张，
来自“material ui”的withStyles}；
从'react Beauty dnd'导入{Draggable，dropable}；
常量样式={
名单：{
宽度：250，
玛金托普：70
},
};
const getItemStyle=（isDragging，DragableStyle）=>({
//一些基本样式可以使物品看起来更漂亮一些
用户选择：“无”，
填充：8*2，
边距：`0 8px 0`，
//如果拖动，请更改背景颜色
背景：IsDraging？“浅绿色”：“红色”，
//我们需要在拖拽表上应用的样式
…拖拉风格，
});
const getListStyle=IsDragingOver=>({
背景：IsDragingOver？“浅蓝色”：“无”，
填充：8，
宽度：250，
});
类WidgetDrawer扩展了React.Component{
状态={items:[{id:1，内容：'Widget A'}，{id:2，内容：'Widget B'}]}；
renderWidgets（）{
常量窗口小部件=[{
名称：“小部件A”
}, {
名称：“小部件B”
}];
返回widgets.map（（widget，index）=>{
回来
{（已提供，快照）=>(
{widget.name}
{提供的.占位符}
)}
})
}
render（）{
const{classes}=this.props；
常量完整列表=(
{（已提供，快照）=>(
{this.state.items.map（（项，索引）=>(
{（已提供，快照）=>(
{item.content}
{提供的.占位符}
)}
))}
{提供的.占位符}
)}
);
返回(
{fullList}
)
}
}
导出默认样式（样式）（WidgetDrawer）；

这可以通过覆盖中提供的道具来解决

const getItemStyle=（isDragging，DragableStyle）=>({
…拖拉风格，
用户选择：“无”，
位置：静态，
填充：8*2，
边距：`0 8px 0`，
背景：IsDraging？“浅绿色”：“红色”，
});

这可以通过覆盖中提供的道具来解决

const getItemStyle=（isDragging，DragableStyle）=>({
…拖拉风格，
用户选择：“无”，
位置：静态，
填充：8*2，
边距：`0 8px 0`，
背景：IsDraging？“浅绿色”：“红色”，
});

适用于任何其他与此抗争的人。这很可能是因为父元素上有一个转换集。即使是零变换，也会弄乱固定子对象上的变换。因此，唯一已知的解决方案是删除父级上的转换（或将其设置为“无”）

或者，您可以尝试使用react门户来寻找替代解决方案

---

对于其他正在与之抗争的人。这很可能是因为父元素上有一个转换集。即使是零变换，也会弄乱固定子对象上的变换。因此，唯一已知的解决方案是删除父级上的转换（或将其设置为“无”）

或者，您可以尝试使用react门户来寻找替代解决方案

---

在“转换”后，在材质UI抽屉中使用react Beauty dnd时，可拖动项将消失，我遇到了相同的问题

但是，可以通过将可拖放列表的transform属性设置为none并防止从抽屉或任何其他转换元素继承转换来防止此行为

---

在“转换”后，在材质UI抽屉中使用react beautiful dnd时，可拖动项将消失，我遇到了相同的问题

但是，可以通过将可拖放列表的transform属性设置为none并防止从抽屉或任何其他转换元素继承转换来防止此行为

---

如果这里的任何答案不起作用，我建议使用他们的答案。

---

基本上，他们已经实现了一个克隆api，将被拖动的元素克隆到dom的根。它应该比使用门户网站更有效。

如果这里的任何答案都不起作用，我建议使用他们的。

---

基本上，他们已经实现了一个克隆api，将被拖动的元素克隆到dom的根。它应该比使用门户更有效。

我实际上注意到，正在拖动的组件向右移动了大约一个像素窗口宽度。如果我开始拖动并将光标一直移动到屏幕的左侧，则会显示拖动的组件。这可能与抽屉定位在右侧有关。将来：我的pr刚刚合并，所以这是过去的事情：）我注意到正在拖动的组件向右移动了大约一个像素的窗口宽度。如果我开始拖动并将光标一直移动到屏幕的左侧，则会显示拖动的组件。这可能是因为抽屉固定在右边……未来：我的公关刚刚被合并，所以这是过去的事：）

import React from 'react';
import { Divider, Drawer, IconButton, List, ListItem, Paper, 
withStyles } from 'material-ui';
import { Draggable, Droppable } from 'react-beautiful-dnd';

const styles = {
  list: {
    width: 250,
    marginTop: 70
  },
};

const getItemStyle = (isDragging, draggableStyle) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: 'none',
  padding: 8 * 2,
  margin: `0 0 8px 0`,

  // change background colour if dragging
  background: isDragging ? 'lightgreen' : 'red',

  // styles we need to apply on draggables
      ...draggableStyle,

});

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? 'lightblue' : 'none',
  padding: 8,
  width: 250,
});

class WidgetDrawer extends React.Component {

  state = { items: [{ id: 1, content: 'Widget A'}, { id: 2, content: 'Widget B'}]};

  renderWidgets() {
    const widgets = [{
      name: 'Widget A'
    }, {
      name: 'Widget B'
    }];

    return widgets.map((widget, index) => {
      return <Draggable key={widget.name} draggableId={widget.name} index={index}>
                  {(provided, snapshot) => (
                    <div>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        <ListItem>
                          <Paper>
                            {widget.name}
                          </Paper>
                        </ListItem>
                      </div>
                      {provided.placeholder}
                    </div>
                  )}
                </Draggable>
    })
  }

  render() {

    const { classes } = this.props;

    const fullList = (
      <div className={classes.list}>
          <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index {index}>
                  {(provided, snapshot) => (
                    <div>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                      {provided.placeholder}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    );

    return (
     <Drawer
       variant='permanent'
       anchor="right"
       open={this.props.open}
       onClose={this.props.toggleDrawer}>
      <div
        tabIndex={0}
        role="button"
        onClick={this.props.toggleDrawer}
        onKeyDown={this.props.toggleDrawer}
      >
        {fullList}
      </div>
    </Drawer>
    )
  }
}

export default withStyles(styles)(WidgetDrawer);