如何突出顯示多個組件以進行拖放文件上傳（Vaadin）

Question

我正在使用Vaadin構建我的前端，並且我想通過將它們從桌面拖到瀏覽器來上傳文件。

有幾個組件可以在同一頁上接收文件。所以我在這些組件上使用了DragAndDropWrapper並實現了DropHandler。當用戶通過其中一個組件拖動文件時，其樣式會發生變化。

但我也希望所有組件的樣式可以接收文件，當文件拖動到無法接收它的區域時，這種方式表明用戶可以放置文件的位置。同時，如果文件被拖動到接收器組件上，只有該組件的樣式應該再次改變。

是否有可能只使用Vaadin來實現？

Answer 1

它的可能性。在事件觸發時添加到頁面主體ondragover和ondragleave偵聽器併爲多個組件添加樣式。 SSCCE：

 
@com.vaadin.annotations.JavaScript("summer.js") 
public class Valo4UI extends UI 
{ 
    @Override 
    protected void init(VaadinRequest request) 
    { 
     VerticalLayout layout = new VerticalLayout(); 
     Panel panel = new Panel("Login"); 
     panel.setSizeUndefined(); 
     panel.setContent(layout); 
     TextField username = new TextField(); 
     username.setStyleName("canReceiveFile"); 
     layout.addComponent(username); 
     TextField password = new TextField(); 
     password.setStyleName("canReceiveFile"); 
     layout.addComponent(password); 
     Button ok = new Button("Login"); 
     ok.setStyleName("canReceiveFile"); 
     layout.addComponent(ok); 
     setContent(panel); 
     JavaScript.getCurrent().execute("initDragStyling()"); 
    } 
... 
}

summer.js：

function ohItsSummer(){ 
    var summerTable = document.getElementsByClassName("canReceiveFile"); 
    for(var i=0; i<summerTable.length; i++){ 
     summerTable[i].style.borderColor = 'orange'; 
    } 
} 
function itsReallyHot(){ 
    var summerTable = document.getElementsByClassName("canReceiveFile"); 
    for(var i=0; i<summerTable.length; i++){ 
     summerTable[i].style.borderColor = 'inherit'; 
    } 
} 

function initDragStyling(){ 
    document.body.setAttribute("ondragover","ohItsSummer()"); 
    document.body.setAttribute("ondragleave","itsReallyHot()"); 
}