CODEWITHSUNDEEP
javascriptreactjsreact-beautiful-dnd
hqgold
hqgold

Reputation: 61

react-beautiful-dnd draggable not visible during drag

I'm creating a trello-like component 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

Upvotes: 6

Views: 2416

Answers (1)

prabin badyakar
prabin badyakar

Reputation: 1746

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

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

Upvotes: 9

Related Questions