How to make content within a dialog draggable?

Question

I'd like to add a grid with draggable rows inside a dialog in my Vaadin 24 app.

However, the dialog seems to keep the grids from detecting any dragging action.

I tried adding the "draggable" class name to the grids, as advised by the documentation, but the drag action is still not detected on any browser. I also tried adding it to the Div itself, or to the layout to which this Div is added, but it does not work.

Here's the full grids implementation (this code comes from Vaadin's example of dragging rows between grids):

public class GridDragRowsBetweenGrids extends Div {

private TypeOperation draggedItem;

public GridDragRowsBetweenGrids() {
    List<TypeOperation> people = new ArrayList<>();
    try {
        people = TypeOperation.getTypeOperationsFromServer();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    ArrayList<TypeOperation> people1 = new ArrayList<>(people);
    ArrayList<TypeOperation> people2 = new ArrayList<>();

    Grid<TypeOperation> grid1 = setupGrid();
    Grid<TypeOperation> grid2 = setupGrid();

    GridListDataView<TypeOperation> dataView1 = grid1.setItems(people1);
    GridListDataView<TypeOperation> dataView2 = grid2.setItems(people2);

    grid1.setDropMode(GridDropMode.ON_GRID);
    grid1.setRowsDraggable(true);
    grid1.addDragStartListener(this::handleDragStart);
    grid1.addDropListener(e -> {
        dataView2.removeItem(draggedItem);
        dataView1.addItem(draggedItem);
    });
    grid1.addDragEndListener(this::handleDragEnd);

    grid2.setDropMode(GridDropMode.ON_GRID);
    grid2.setRowsDraggable(true);
    grid2.addDragStartListener(this::handleDragStart);
    grid2.addDropListener(e -> {
        dataView1.removeItem(draggedItem);
        dataView2.addItem(draggedItem);
    });
    grid2.addDragEndListener(this::handleDragEnd);

    Div container = new Div(grid1, grid2);
    setContainerStyles(container);

    grid1.addClassName("draggable");
    grid2.addClassName("draggable");

    add(container);
}

private static Grid<TypeOperation> setupGrid() {
    Grid<TypeOperation> grid = new Grid<>(TypeOperation.class);
    setGridStyles(grid);

    return grid;
}

private void handleDragStart(GridDragStartEvent<TypeOperation> e) {
    draggedItem = e.getDraggedItems().get(0);
}

private void handleDragEnd(GridDragEndEvent<TypeOperation> e) {
    draggedItem = null;
}

private static void setGridStyles(Grid<TypeOperation> grid) {
    grid.getStyle().set("width", "300px").set("height", "300px")
            .set("margin-left", "0.5rem").set("margin-top", "0.5rem")
            .set("align-self", "unset");
}

private static void setContainerStyles(Div container) {
    container.getStyle().set("display", "flex").set("flex-direction", "row")
            .set("flex-wrap", "wrap");
}

}