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

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

0 голосов
/ 19 декабря 2018

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

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

"метка 1

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

метка 2

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

метка3

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

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

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

Я попытался обернуть перетаскиваемый элемент в 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

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

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

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

1 Ответ

0 голосов
/ 22 марта 2019

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>
)}
...