Vaadin Drag Drop组件

Question

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

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

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

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

我注意到，当组件开始向我展示FireFox中的这个行为时，行为在那里很好吗？

Answer 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();
}

。

一切顺利。