Can react-beautiful-dnd have multiple droppable areas?

Question

React

Good day!

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

The problem is the following. When dragging on COPY_AREA in the onDragEnd method, the drop on this area is not caught, only on the list itself.

Is it possible to achieve what you want with this library? The fact is that in the documentation I read that it <Draggable />must be wrapped <Droppable />, but I need an empty container when dragging on which I would do something (delete / copy). At the same time, I found an issue where it says that this is possible https://github.com/atlassian/react-beautiful-dnd/i...

Answer 1

they both need to be set to the same TYPE so that they can both accept items of the same 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'.