java - 用于添加图像的 Wicket 拖放功能

Question

我正在制作一个 wicket 应用程序，它可以管理 Cashdesk 应用程序的一些选项。选项之一是更改 selected 的图像。 产品 .

选择此选项时，用户(管理员)可以从数据库 (SQL) 中已经存在的图像中进行选择，或者如果所需的图像不存在，则添加新图像。
不要提及测试名称和令人敬畏的图像(它仍在测试阶段)

我更喜欢看到通过拖放实现的图像添加
html5 demo [dnd-upload]
(从桌面进入浏览器)

我目前正在使用 Wicket-6.2.0 和 wicket-dnd 0.5.0 而且我似乎无法正常工作!我能找到的所有示例都来自 wicket 2.x 或更低版本。

在 Wicket-6.2 中可以使用拖放，但我该如何实现呢？

好像有一些DraggableBehavior在 Wicket 口？欢迎任何帮助!

[更新]

升级到 wicket-dnd 0.6

Answer 1

根据您的代码，我编写了自定义 Ajax 行为。然而，我简化了它，它对我有用，而不需要拖拽破解。

AbstractFileDropAjaxBehavior.java

public abstract class AbstractFileDropAjaxBehavior extends AbstractDefaultAjaxBehavior
{

    @Override
    protected void respond(final AjaxRequestTarget target)
    {
        RequestCycle requestCycle = RequestCycle.get();

        StringValue data = requestCycle.getRequest().getRequestParameters().getParameterValue("data");
        String[] base64Data = data.toString().split(";");
        String fileName = base64Data[0].substring(base64Data[0].indexOf(':') + 1, base64Data[0].length());
        String dataType = base64Data[1].substring(base64Data[1].indexOf(':') + 1, base64Data[1].length());
        String binaryData = base64Data[2].substring(base64Data[2].indexOf(',') + 1, base64Data[2].length());
        byte[] rawData = DatatypeConverter.parseBase64Binary(binaryData);

        processFile(fileName, dataType, rawData);
    }

    @Override
    protected void onComponentTag(ComponentTag tag) {
        tag.put("my:dropcontainer.callback", getCallbackUrl().toString());

        tag.put("ondragover", "return false;");
        tag.put("ondrop", "return AbstractFileDropAjaxBehavior_upload(event, '#" + tag.getId() + "');");
        tag.put("ondragenter", "$('#" + tag.getId() + "').addClass('dropover')");
        tag.put("ondragleave", "$('#" + tag.getId() + "').removeClass('dropover')");
    }

    @Override
    public void renderHead(Component component, IHeaderResponse response) {
        super.renderHead(component, response);

        response.render(OnDomReadyHeaderItem.forScript("jQuery.event.props.push('dataTransfer');"));

        response.render(JavaScriptContentHeaderItem.forScript("function AbstractFileDropAjaxBehavior_upload(e, selector) {\n" + 
                "   var files = e.dataTransfer.files;\n" + 
                "   \n" + 
                "   $.each(files, function(i, file) {\n" + 
                "       var reader = new FileReader();\n" + 
                "       \n" + 
                "       reader.onload = function(input) {\n" + 
                "           var fileName = \"fileName:\" + file.name + \";\";\n" + 
                "           var base64data = input.target.result;\n" + 
                "           \n" + 
                "           Wicket.Ajax.post({\n" + 
                "               \"u\": $(selector).attr('my:dropcontainer.callback'),\n" + 
                "               \"ep\": {\n" + 
                "                   \"data\" : fileName + base64data,\n" + 
                "               },\n" + 
                "           });\n" + 
                "           \n" + 
                "       };\n" + 
                "\n" + 
                "       reader.readAsDataURL(file);\n" + 
                "   });\n" + 
                "   \n" + 
                "   $(selector).removeClass('dropover');\n" + 
                "   \n" + 
                "   return false;   \n" + 
                "}\n", "AbstractFileDropAjaxBehavior-script"));
    }

    protected abstract void processFile(String fileName, String dataType, byte[] rawData);

}