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

Question

[glem1337]

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

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

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

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

Answer 1

[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'.