Drag and Drop auto scroll in scroller

Flow
1

Hi all,
I have a question regarding DnD functionality in V24. I would like to have multiple drop targets in CSSGridLayout which is placed in scroller (the CSSGridLayout can be bigger than visible area). Whenever I start the drag and I get to “border” of the scroller I would like it to scroll automatically (horizontally or vertically) so I can reach the drop zones that are out of view. Do you have any ideas how to achieve this?

Thank you
JS

2

This should work out of the box. I have such a view in one project.

Can you provide your code to reproduce the problem?

3

Hello,
this is simple view:

@Route
public class MainView extends Div {

    public MainView() {

        FluentGridLayout pagesGrid = new FluentGridLayout()
                .withMargin(false)
                .withPadding(false)
                .withSpacing(false)
                .withTemplateColumns(new Auto(), new Auto(), new Auto(), new Auto());
        pagesGrid.setRowGap(new Length("1%"));
        pagesGrid.setColumnGap(new Length("1%"));
        PageView firstPageWithContent = new PageView("FPC");
        Div pageContent = new Div();
        pageContent.addClassName("content");
        pageContent.setHeight("100px");
        pageContent.setWidth("150px");

        DragSource<Div> drag = DragSource.configure(pageContent,true);
        drag.setEffectAllowed(EffectAllowed.MOVE);
        firstPageWithContent.addContent(pageContent);
        pagesGrid.add(firstPageWithContent);

        IntStream.rangeClosed(1, 20).mapToObj(p -> new PageView("Page " + p)).forEach(pagesGrid::add);

        Scroller scroller = new Scroller();
        scroller.setHeight("800px");
        scroller.setWidth("600px");
        scroller.setScrollDirection(Scroller.ScrollDirection.BOTH);
        scroller.setContent(pagesGrid);

        add(scroller);
        setWidthFull();
        setHeightFull();

    }

}

this is class PageView:

public class PageView extends Composite<VerticalLayout> {

    private final String caption;
    private Div contentWrapper;

    public PageView(String caption) {
        this.caption = caption;
        init();
    }

    private void init() {
        VerticalLayout layout = getContent();
        contentWrapper = new Div();
        contentWrapper.addClassName("contentWrapper");
        contentWrapper.setHeight("300px");
        contentWrapper.setWidth("200px");

        DropTarget<Div> dropTarget = DropTarget.configure(contentWrapper,true);

        layout.add(createHeader());
        layout.addAndExpand(contentWrapper);
        layout.setWidth("200px");
        layout.setHeight(null);
        layout.setSpacing(false);
        layout.setPadding(false);
        layout.addClassName("page");

    }

    private Component createHeader() {
        Div div = new Div(new Span(caption));
        div.addClassName("pageHeader");

        return div;
    }

    public void addContent(Component c) {
        contentWrapper.add(c);
    }

}

styles.css

.page {
  background-color: var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-m);
  box-shadow: var(--lumo-box-shadow-s);
}

.contentWrapper {
  height: 100%;
  width: 100%;
  padding: 0;
  position: relative;
}

.pageHeader {
  width: 100%;
  box-sizing: border-box;
  font-weight: 500;
  cursor: default;
  border-bottom: 1px solid var(--lumo-contrast-20pct);
  padding: var(--lumo-space-m)
}

.content {
  background-color: var(--lumo-primary-color);
}

You will also need this dependency:

<dependency>
    <groupId>org.vaadin.addons.componentfactory</groupId>
    <artifactId>vaadin-css-grid-layout</artifactId>
    <version>3.0.0</version>
    <exclusions>
        <exclusion>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
        </exclusion>
    </exclusions>
</dependency>

If you run the code, there is a 800x600 scroller with content. The blue rectangle is draggable, but as soon as you start moving it, it doesn’t scroll the scroller. Could you please take a look on this.

Thx
JS