我正在制作一个可以管理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);
}