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

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

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

我目前正在使用 Wicket-6.2.0 wicket-dnd 0.5.0 ,但我似乎无法正常工作!我可以找到的所有示例均来自wicket 2.x或更低版本。

可以在Wicket-6.2中使用拖放功能,但是如何实现呢?

wicket 中似乎有些DraggableBehavior?欢迎任何帮助!

[更新]

升级到 wicket-dnd 0.6

最佳答案

根据您的代码,我编写了自定义Ajax行为。我简化了它,但是它对我来说是有效的,而且不会拖累hack。

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

}

09-10 03:37
查看更多