如何突出显示拖放文件上传的多个组件（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()");
}