Есть ли способ добавить метку для перетаскиваемых и сбрасываемых предметов в реагировать

Question

Я использую response-beautiful-dnd для создания перетаскиваемых полос текста, которые я хочу переместить с правой карты на левую. Я хочу, чтобы перетаскиваемые полосы текста появлялись под ярлыком, но все ярлыки соединяются в пару строк.

Например, если у меня есть три метки: "метка 1", "метка 2", "метка 3", все метки соберутся вместе и будут отображаться как "метка 1 метка 2 метка 3", но я хочу, чтобы она выглядела как

"этикетка 1

[перетаскиваемая строка текста]

ярлык 2

[перетаскиваемая строка текста]

ярлык 3

[перетаскиваемая строка текста] "

Я использовал компонент InputLabel Material-UI для метки, которую я хочу. Код выглядит так:

<InputLabel
key={item + String(index)}
htmlFor={item}
>
{item}
</InputLabel>

Я попытался обернуть draggable в div, чтобы я мог дать ему имя и идентификатор.

<div name={item._type} id={item._type}>
<Draggable>
...
</Draggble>
<div>

Ниже приведен полный код

<GridItem xs={12} sm={12} md={12}>
{this.state.configTypes.map((item, index) => (
<InputLabel
key={item + String(index)}
htmlFor={item}
>
{item}
</InputLabel>
))}
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={dropdownListStyle(snapshot.isDraggingOver)}
>
{this.state.configs.map((item, index) => (
<div name={item._type} id={item._type}>
<Draggable
key={item.name + String(index)}
draggableId={item.name + String(index)}
                              index={index}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={dropdownItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.name}
</div>
)}
</Draggable></div>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</GridItem>

Ожидаемые результаты:

"этикетка 1

[перетаскиваемая строка текста]

ярлык 2

[перетаскиваемая строка текста]

ярлык 3

[перетаскиваемая строка текста] "

Фактические результаты:

"этикетка 1 этикетка 2 этикетка 3

[перетаскиваемая строка текста]

[перетаскиваемая строка текста]

[перетаскиваемая строка текста] "

Answer 1

react-beatiful-dnd требует, чтобы DraggableЭто будут визуальные братья и сестры, что не так с вашей реализацией, смотрите здесь.

Если вы хотите просто сгруппировать DraggableВот так вот посмотрите на этот пример истории.

В противном случае вам просто нужно добавить еще одного ребенка в Draggable дочерняя функция, к которой вы применяете draggableProps а также dragHandleProps

{(provided, snapshot) => (
    <div>
        <InputLabel
                key={item + String(index)}
                htmlFor={item}>
                {item}
        </InputLabel>
        <div ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={dropdownItemStyle(
                snapshot.isDragging,
                provided.draggableProps.style
            )}
            >
            {item.name}
        </div>
    </div>
)}