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

。

一切順利。