I'm creating a trello-like ponent using react-beautiful-dnd however the draggable object isn't visible during a drag and I am struggling to figure out why.

See gif here

This is the relevant code: here

I feel as though it might have something to do with

<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>

But I'm stumped

I'm creating a trello-like ponent using react-beautiful-dnd however the draggable object isn't visible during a drag and I am struggling to figure out why.

See gif here

This is the relevant code: here

I feel as though it might have something to do with

<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>

But I'm stumped

• javascript
• reactjs
• react-beautiful-dnd

1 Answer 1

This usually happens when there is a transform property (Example transform: scale(0.9)) in the parent ponents.

So, the default position property fixed doesn't work as expected.

So, we either have to remove the transform property wrapping the drag and drop ponent or just override the position property with static.

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