0

I've recently been trying to build a trello-like application using react-beautiful dnd. I am able to get draggables to drag elements, but when I grab an element to drag, all the draggable elements drag with it. I've been going through react-beautiful-dnd's egghead.io course and documentation, but am still unable to figure out why all of the draggables are dragging.

Here is a sample of my code for my droppable:

            <div>
                <Droppable droppableId={toString(this.props.column.column_id)}>
                    {provided => (
                        <div
                            ref={provided.innerRef} 
                            {...provided.droppableProps}
                            className='task-columns'
                        >
                            {this.props.column.column_name}
                            {this.state.tasks.map((taskData, i) => <Tasks key={taskData.task_id} task={taskData} index={i}/> )}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </div>

And here is the code for my draggable items:

            <Draggable draggableId={toString(this.props.task.task_id)} index={this.props.index}>
                {provided => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {this.props.task.task}
                    </div>
                )}
            </Draggable>

These are both inside of the render method of class components. Thanks in advance for your help!

mattcbodily
  • 1
  • Can you create a codesandbox with the behaviour? – Aldrin Jan 19 '20 at 16:55
  • I actually just fixed it. It turned out to be an issue with my draggableId and droppableId not being completely unique in the DragDropContext. Thank you though for being willing to help! – mattcbodily Jan 20 '20 at 16:18

1 Answers1

0

After continuing through the documentation, I discovered that the issue was my droppableId's and draggableId's were not completely unique within the DragDropContext. I was able to fix it by ensuring they were unique values.

mattcbodily
  • 1