Question

我正在使用react-beautiful-dnd创建一个类似于trello的组件，但是在拖动过程中可拖动对象不可见，我正在努力找出原因。

这是相关代码：here

我觉得这可能与

有关

<Draggable
  draggableId={this.props.task.id}
  index={this.props.index}
>
  {(provided, snapshot) =>
    <div className={this.getClassName(snapshot.isDragging)}
      {...provided.draggableProps}
      ref={provided.innerRef}
      onClick={this.toggleDialog}
    >
      //etc
    </div>
  )}
</Draggable>

但是我很困惑

Answer 1

通常在父组件中具有转换属性（示例转换：scale（0.9））时发生。

因此，固定的默认位置属性无法按预期工作。

因此，我们要么删除包装了拖放组件的transform属性，要么仅使用static覆盖position属性。

<div className={this.getClassName(snapshot.isDragging)}
  {...provided.draggableProps}
  ref={provided.innerRef}
  style={{ ...provided.draggableProps.style, position: 'static' }}
  onClick={this.toggleDialog}
>

在拖动过程中，react-beautiful-dnd可拖动项不可见

1 个答案: