Задать вопрос
glem1337
@glem1337

Можно ли сделать в react-beautiful-dnd несколько droppable областей?

Доброго времени суток!

https://codesandbox.io/s/winter-fast-id00z?file=/s...

Проблема заключается в следующем. При перетаскивании на COPY_AREA в методе onDragEnd не отлавливается drop на эту область, только в самом списке.

Возможно ли с помощью этой библиотеки добиться желаемого? Дело в том, что в документации я прочитал что <Draggable /> должен быть обязательно обернут <Droppable />, но мне нужен пустой контейнер при драге на который бы я что-то делал (удалял/копировал). При этом я нашел issue где сказано, что такое возможно https://github.com/atlassian/react-beautiful-dnd/i...
  • Вопрос задан
  • 642 просмотра
Подписаться 1 Простой Комментировать
Решения вопроса 1
hzzzzl
@hzzzzl
им обеим надо задать одинаковый TYPE, чтобы они обе могли принимать айтемы с одинаковым типом

<Droppable droppableId="droppable2" type="LIST">
....


onDragEnd(result) {
    ....
    console.log(result.destination.droppableId, result);

    if(result.destination.droppableId === 'droppable2') {
      // переместить в this.state.items2, или еще как-нибудь отметить позицию айтема
    }
    .....
  }


https://github.com/atlassian/react-beautiful-dnd/b...

type: A TypeId(string) that can be used to simply accept only the specified class of <Draggable />. <Draggable />s always inherit type from the <Droppable /> they are defined in. 

For example, if you use the type PERSON then it will only allow <Draggable />s of type PERSON to be dropped on itself. 

<Draggable />s of type TASK would not be able to be dropped on a <Droppable /> with type PERSON.
If no type is provided, it will be set to 'DEFAULT'.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽