CODEWITHSUNDEEP
javavaadinvaadin-flowvaadin14
Lisa Hennecart
Lisa Hennecart

Reputation: 79

Generic Drag and Drop

I'm trying to to make view with multiple divs containing Vaadin Charts in them, and move them around with the DnD. I followed this tutorial. This is my class that extends Div.

List<Div> divs = new ArrayList<>();
        divs.add(new Bubble());
        divs.add(new FunnelChart());
        divs.add(new ColumnLineAndPie());
        divs.add(new PieWithLegend());
        divs.add(new Bubble());
        divs.add(new FunnelChart());
        divs.add(new ColumnLineAndPie());
        divs.add(new PieWithLegend());
        List<DragSource<Div>> cards = new ArrayList<>();
        for (int i = 0; i < 8; i++) {
            DragSource<Div> temp = DragSource.create(divs.get(i));
            cards.add(temp);
            cards.get(i).setDragData(true);
        }
        VerticalLayout board = new VerticalLayout();
        HorizontalLayout row1 = new HorizontalLayout();
        row1.setWidthFull();
        row1.add(divs.get(0), divs.get(1), divs.get(3));
        HorizontalLayout row2 = new HorizontalLayout();
        row2.setWidthFull();
        row2.add(divs.get(4));
        HorizontalLayout row3 = new HorizontalLayout();
        row3.setWidthFull();
        row3.add(divs.get(5), divs.get(7));
        board.add(row1, row2, row3);
        add(board);

But somehow, I can't drag my elements.

Upvotes: 0

Views: 110

Answers (1)

J. Diogo Oliveira
J. Diogo Oliveira

Reputation: 141

In your example dragging is active, it just doesn't drop anywhere. Unless you don't want the pick-and-place-in-containers style drag but the window-like drag (moveable). In that case why not using a tweaked Vaadin Dialog ?

Update #1: So it seems in this example:

    List<Div> divs = new ArrayList<>();

    divs.add(new Div(new Bubble()));
    divs.add(new FunnelChart());
    divs.add(new PieWithLegend());
    divs.add(new Bubble());
    divs.add(new FunnelChart());
    divs.add(new PieWithLegend());


    divs.add(new Div(new Span("AAAAAA")));
    divs.add(new Div(new Span("BBBBBB")));
    divs.add(new Div(new Span("CCCCCC")));
    divs.add(new Div(new Span("DDDDDD")));
    divs.add(new Div(new Span("EEEEEE")));
    divs.add(new Div(new Span("FFFFFF")));


    List<DragSource<Div>> cards = new ArrayList<>();
    for (int i = 0; i < divs.size(); i++) {
        DragSource<Div> temp = DragSource.create(divs.get(i));
        cards.add(temp);
        cards.get(i).setDragData(true);
    }
    VerticalLayout board = new VerticalLayout();
    HorizontalLayout row1 = new HorizontalLayout();
    row1.setWidthFull();
    row1.add(divs.get(0), divs.get(1), divs.get(3));
    HorizontalLayout row2 = new HorizontalLayout();
    row2.setWidthFull();
    row2.add(divs.get(4));
    row2.add(divs.get(5));
    row2.add(divs.get(6));
    HorizontalLayout row3 = new HorizontalLayout();
    row3.setWidthFull();
    row3.add(divs.get(7));
    row3.add(divs.get(8));
    row3.add(divs.get(9));
    board.add(row1, row2, row3);
    add(board);


    add(new Div(new Span("NOOOOOOOO")));

Only the NOOOOOOO div is not draggable. And the charts ones appear not to be as well, but if you add padding: 100px, for example, and then drag them by the frame, it works. So I'd say that the problem is with what you put inside them. Charts are complex components that, too, accept dragging in some situations. They might need to be tweaked but i wouldn't expect it to be an easy task. Maybe the best way would be creating a 'picking' area where you would grab the cards.

Upvotes: 1

Related Questions