Drag & Drop Not Working after removing component & adding it back to view

Flow
1

I have View that I have a tree which I’m able to drag and drop nodes from a tree to a VerticalLayout. If I remove the view and later add it back then drag and drop no longer works. I have provided a simple example that doesn’t use a tree component but two vertical layouts that can be switched via a button. In the first view you can drag and drop the text but once you switch back and forth the second time the drop no longer works. I want to confirm that this is a bug or an error on my part and what I need to do to fix it without completely recreating the component by instantiating it again.



import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dnd.DragSource;
import com.vaadin.flow.component.dnd.DropTarget;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.Route;
@Route("drag-and-drop-test-view")
public class DragAndDropTestView extends VerticalLayout implements BeforeEnterObserver, AfterNavigationObserver{

	
	private static final long serialVersionUID = 1L;
	private Button buttonSwitchViews=new Button("Switch Views");
	private VerticalLayout view1=new VerticalLayout();
	private VerticalLayout view2=new VerticalLayout();
	
	public DragAndDropTestView() {
		System.out.println("DragAndDropTestView.constructor");
	}

	@Override
	public void beforeEnter(BeforeEnterEvent event) {
		System.out.println("DragAndDropTestView.beforeEnter");		
	}

	@Override
	public void afterNavigation(AfterNavigationEvent event) {
		this.setSizeFull();
		System.out.println("DragAndDropTestView.afterNavigation calling setup");
		this.add(buttonSwitchViews);
		Span span=new Span("Text To Drag");
		this.add(span);
		
		this.add(view1);
		Span span1=new Span("View 1");
		view1.add(span1);
		view1.setSizeFull();
		view2.add(new Span("View 2"));
		view2.setSizeFull();
		DragSource<Span> dragSource=DragSource.create(span);
		
		DropTarget<VerticalLayout> dt=DropTarget.create(view1);
		
		buttonSwitchViews.addClickListener(evt->{
			if (indexOf(view1)!=-1) {
				this.remove(view1);
				this.add(view2);
			}else {
				this.remove(view2);
				this.add(view1);
			}
		});
		
	}
	
}

Thanks.

2

Hi Eugene,

Thanks for reporting this. It looks like a bug with current flow-dnd support. Can you create a ticket for us in this repo https://github.com/vaadin/flow ?

Then we can try to figure out where the problem is.

Thanks

Zhe

3

Just added it and referenced this post: https://github.com/vaadin/flow/issues/6054.

Thanks.