通用拖放

Question

我正在尝试使用其中包含 Vaadin 图表的多个 div 制作视图，并使用 DnD 移动它们。我关注了this tutorial。这是我的 class 扩展 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);

但不知何故，我无法拖动我的元素。

Answer 1

在您的示例中，拖动处于活动状态，只是不会掉落到任何地方。除非你不想要在容器中拾取和放置样式的拖动，而是像 window 那样的拖动（可移动）。在那种情况下，为什么不使用经过调整的 Vaadin 对话框？

更新 #1：所以在这个例子中似乎是：

    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")));

只有 NOOOOOOO div 不可拖动。图表看起来不太好，但是如果您添加 padding: 100px，例如，然后将它们拖到框架旁边，它就可以工作。所以我会说问题在于你放入其中的内容。图表是复杂的组件，在某些情况下也可以拖动。它们可能需要进行调整，但我认为这不是一件容易的事。也许最好的方法是创建一个 'picking' 区域，您可以在其中抓取卡片。

通用拖放

Generic Drag and Drop

java

vaadin

vaadin-flow

vaadin14