1

I have a list of cards that want to drag and drop. I want the user could drag and drop by pressing on the specific place (div) on the card (not the whole card). I transfer this div to the child component and add {...provided.dragHandleProps} on this div. Everything works ok, but I get mistakes in console, that Unable to find drag handle. How can I fix this problem?

 const posts = (
      <DragDropContext onDragEnd={this.dragDrop}>
        <Droppable droppableId="dragCards">
          {(provided) => (
            <div ref={provided.innerRef}>
              {cards.map((item, index) => {
                return (                    
                      <Draggable draggableId={item.key} index={index}>
                        {(provided) => (
                          <div                    
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                          >
                            <Cards                                                              
                              dragChip={
                                <div {...provided.dragHandleProps}>
                                  {dragChip}
                                </div>
                              }  />
                          </div>
                        )}
                      </Draggable>                       
                );
              })}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );

And this is div, that I transfer to the child component.

 const dragChip = (
      <div >
        drag me
      </div>
    );
Festina
  • 327
  • 3
  • 17
  • Can you try destructuring {...provided.dragHandleProps} in parent
    of
    Let me know, if it helps
     – Shubham J. Jul 21 '21 at 12:18
  • Shubham Jajoo, I tried to do it, but I can drag and drop the whole card in any place I click it. And I need to drag and drop card only if I click on specific place. – Festina Jul 21 '21 at 17:23

2 Answers2

1

You can spread the props in the div inside the drag chip component. And if you want to conditionally drag and drop, then you can use the isDragDisabled prop of Draggable component

Ankur Kedia
  • 3,453
  • 1
  • 13
  • 15
0

Looks like your <Draggable> needs a key.

Before <Draggable draggableId={item.key} index={index}>

After <Draggable key={item.key} draggableId={item.key} index={index}>

https://github.com/atlassian/react-beautiful-dnd/issues/1673#issuecomment-571293508

Asolace
  • 1,006
  • 8
  • 9