Vaadin拖放组件

Question

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

我们有一个可拖拽的物体。 我们也可以点击它来打开它的菜单。

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

但是在开发环境中，所有具有相同功能的组件行为相同，当我们重新启动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(); 
} 

。

一切顺利。