Vaadin 拖放组件答案

【问题标题】：Vaadin Drag Drop ComponentVaadin 拖放组件
【发布时间】：2014-12-15 06:16:54
【问题描述】：

我们正在使用 Vaadin 创建一个 Web 应用程序。我们的应用程序包含很多拖放功能。

我们有一个可拖动的对象。我们也可以点击它来打开它的菜单。

有时，当我们单击该项目时，它的行为就像它被拖动一样。发生这种情况时，我们无法打开其菜单，因为该组件处于拖动模式。

具有相同功能的所有组件的行为都相同，但是在开发环境中，当我们重新启动 tomcat 时问题就消失了？

我注意到，当组件开始向我显示此行为时，FireFox 中的网页的行为是否正常？

【问题讨论】：

我的回答对你有帮助吗？
嘿@KevinPaton 实际上我正忙于其他一些事情，但实际上为拖动模式设置另一个按钮并不适合我们，但直到现在才真正找到真正的问题，为什么会这样.. ..
是的，我知道这并不理想，我现在也面临着类似的情况。希望你能得到解决！
@KevinPaton 感谢您的努力...但是您面临同样的问题，一些 Vaadin 的错误？或在我们的结尾

标签： google-chrome firefox tomcat vaadin

【解决方案1】：

一个简单的解决方案是引入一个拖动模式/编辑按钮，允许用户打开和关闭拖动模式。

这意味着用户可以与组件交互，然后在他们希望拖动它们时进入这种“拖动模式”。因此减少了尝试与组件交互并开始“拖动”的挫败感。

我已经创建了一个简单的示例程序来在下面试用。

public class DemoUI extends UI {

    HorizontalSplitPanel splitPanel;
    DragAndDropWrapper wrapperA;
    DragAndDropWrapper wrapperB;

    DragAndDropWrapper splitPaneWrapper;
    Button buttonA;
    Button buttonB;
    private boolean isDragMode = false;

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {

        final HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();

        Button buttonA = new Button("Button A");
        Button buttonB = new Button("Button B");

        final DragAndDropWrapper wrapperA = new DragAndDropWrapper(buttonA);
        final DragAndDropWrapper wrapperB = new DragAndDropWrapper(buttonB);

        final VerticalLayout leftPanel = new VerticalLayout();
        final VerticalLayout rightPanel = new VerticalLayout();

        DragAndDropWrapper leftPanelWrapper = new DragAndDropWrapper(leftPanel);
        DragAndDropWrapper rightPanelWrapper = new     DragAndDropWrapper(rightPanel);

        buttonA.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                Notification.show("Button A was clicked");

            }

        });

        buttonB.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                Notification.show("Button B was clicked");

            }

        });

        leftPanelWrapper.setDropHandler(new DropHandler() {

            @Override
            public void drop(DragAndDropEvent event) {
                leftPanel.addComponent(event.getTransferable().getSourceComponent());

            }

            @Override
            public AcceptCriterion getAcceptCriterion() {
                return AcceptAll.get();
            }

        });

        rightPanelWrapper.setDropHandler(new DropHandler() {

            @Override
            public void drop(DragAndDropEvent event) {
                rightPanel.addComponent(event.getTransferable().getSourceComponent());

            }

            @Override
            public AcceptCriterion getAcceptCriterion() {
                return AcceptAll.get();
            }

        });

        final Button dragMode = new Button("Drag Mode On");

        dragMode.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                isDragMode = !isDragMode;
                if (isDragMode) {
                    dragMode.setCaption("Drag Mode Off");
                    wrapperA.setDragStartMode(DragStartMode.WRAPPER);
                    wrapperB.setDragStartMode(DragStartMode.WRAPPER);
                } else {
                    dragMode.setCaption("Drag Mode On");
                    wrapperA.setDragStartMode(DragStartMode.NONE);
                    wrapperB.setDragStartMode(DragStartMode.NONE);
                }

            }

        });

        leftPanel.setSizeFull();
        rightPanel.setSizeFull();
        leftPanelWrapper.setSizeFull();
        rightPanelWrapper.setSizeFull();

        leftPanel.addComponent(wrapperA);
        rightPanel.addComponent(wrapperB);

        splitPanel.setFirstComponent(leftPanelWrapper);
        splitPanel.setSecondComponent(rightPanelWrapper);
        splitPanel.setSizeFull();

        VerticalLayout layout = new VerticalLayout();
        layout.addComponent(dragMode);
        layout.addComponent(splitPanel);
        layout.setSizeFull();

        this.setContent(layout);
        this.setSizeFull();
}

。

一切顺利。

【讨论】：