Как в react-beautiful-dnd сделать перетаскивание через внутренний компонент

Рейтинг: 0Ответов: 1Опубликовано: 06.02.2023

Внутри компонента TableRow в разметке есть кнопка
Как реализовать перетаскивание только при удержании клика на этой кнопке, а не на всём компоненте TableRow

return (
  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="droppable">
      {(provided) => (
        <div ref={provided.innerRef}>
          {items.map((row, index) => (
            <Draggable key={row._id} draggableId={row._id} index={index}>
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                >
                  <TableRow rowIndex={index}>
                    {row.data.map(renderCell)}
                  </TableRow>
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
);

UPD
"react-beautiful-dnd": "^13.1.1"

reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Нужно {...provided.dragHandleProps} передать во внутренний компонент

Например dragHandleProps передали пропсом в TableRow, и добавили этот пропс кнопке:

return (
  <div className="table-row">
    <button {...dragHandleProps}>this is drug button</button>
    {children}
  </div>
)