拖动时自动滚动 - Vaadin DragDrop 插件答案

【问题标题】：Auto scroll on drag - Vaadin DragDrop add-on拖动时自动滚动 - Vaadin DragDrop 插件
【发布时间】：2017-03-13 21:22:32
【问题描述】：

我有一个带有 DDVerticalLayout 子组件的固定位置 CssLayout。我正在根据用户交互动态填充此垂直布局以创建列表视图。当列表变得大于显示区域时，我遇到了问题。它可以正确滚动，但拖动不会自动滚动。这迫使用户拖动、滚动、拖动、滚动、拖动......

例如，如果我在列表底部选择了一个项目，而视图一次只显示 6 个项目，我不能一次将其向上拖动超过 5 个空格。视图不会根据鼠标悬停自动滚动。

父 CssLayout 和子 DDVerticalLayout CSS：

.list {
  z-index: 9999;
  position: fixed;
  right: 1%;
  top: 20%;
  max-width: 25%;
  max-height: 70%;
  min-height: 150px;

  .v-verticallayout {
    background-color: #EEEEEE;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    margin-left: 6px;
    margin-right: 6px;
    max-height: 350px;
    min-height: 100px;
    border-radius: 4px;
    border: 1px solid #d5d5d5;
  }
}

CssLayout 类中的DDVerticalLayout 设置：

private final DDVerticalLayout layout = new DDVerticalLayout();
//...
layout.setDragMode(LayoutDragMode.CLONE);
layout.setSizeUndefined();
layout.setDropHandler(new DefaultVerticalLayoutDropHandler()     
       @Override
        protected void handleComponentReordering(DragAndDropEvent event) {
            super.handleComponentReordering(event);
            //custom code omitted
        }
    });

我将 drag and drop add-on v1.3.2 用于 Vaadin v7.7.6。

【问题讨论】：

自己没有测试过，但也许这个有帮助？ vaadin.com/directory#!addon/dndscroll-add-on
看起来该插件仅适用于表格或面板布局。

标签： java html css vaadin

【解决方案1】：

这是一篇旧帖子，但可能对遇到此问题的其他人有用。您需要将 VerticalLayout 包装在 Panel 中才能使用 DNDScroll 插件。像这样 -

Panel panel = new Panel();
panel.setContent(content);
panel.setHeight(200, Unit.PIXELS); //optional - could be setSizeFull();
PanelAutoScrollExtension extension = new PanelAutoScrollExtension();
extension.extend(panel);

【讨论】：