Drag and Drop between separate layouts [Vaadin 8]

Hi, I want to add drag’n’drop functionality between different custom components (layouts) to my application but I’m confused. In DND sample demo with cards you have only one layout and you added DropTargetExtension to each card. You call replaceComponent(target, source) for the layout so the replacement works fine. However if I modified the code and added another layout, first card is in first layout and second card in second layout. How can I achieve that the cards will be switched on drag’n’drop? Which component should have defined DropTargetExtension? The card or the layouts? If I define the card as DropTargetExtension then which layout of the two should call replaceComponent()?

A DropTargetExtension should be on whichever Component that is supposed to receive drop events. So if you want to drop Cards on a Layout, one DropTargetExtension should be on the Layout. If you want to drop Cards on a Layout OR a Card on that Layout, you will need a DropTargetExtension on both the Layout and the Cards. If you want to drag Cards between two Layouts and allow dropping Cards on other Cards, you will need DropTargetExtensions on each of the Layouts and Cards.


Yes, I want to drop cards on the Layout because I want to add a Card to empty Layout. Also I want to drop on Card to be able to replace cards between each other.
So the DropTargetException on Layout is fine. It will just add Card to the Layout when dropped.
But what will do DropTargetExtension on the Card? The dragged card (dragSource) and target Card (target) are not in the same Layout as in the demo. For which Layout should I call replaceComponent(target, dragSource). I have two Layouts, I can call it for the Layout where I’m dropping the Card and it gets replaced, however the Card gets removed from Layout from where I’m dragging.

Let’s assume the following kind of UI:

|---------------   -------------|
|  LAYOUT 1    |   | LAYOUT 2   |
|              |   | ( CARD 3 ) |
| ( CARD 1 )   |   |            |
|              |   | ( CARD 2 ) |
----------------   --------------

Let’s say both Layouts have DropTargetExtensions and each Card has a DragSourceExtension. You want to drag CARD 1 from left to right, so you click CARD 1, drag it to the empty spot. You will get a DropEvent. In that case, you want to first remove CARD 1 from LAYOUT 1 and then add it to LAYOUT 2. What happens if you drag CARD 1 on top of CARD 2? Nothing, because CARD 2 is not a DropTarget, even though it’s on top of a DropTarget. So if you want to be able to drag things and not only be able to drop on the empty spaces in the layout, each CARD should probably be a DropTarget as well. Now in the DropEvent handler you probably want to take the Parent of the DropTarget (which would be LAYOUT 2 if you drop on CARD 2) and add the dragged Component on that. Then you could for example remove CARD 2 from LAYOUT 2 and add it to LAYOUT 1.