来自此代码:http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm
我正在加载这个 html 页面:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 AJAX Uploader</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
console.log(JSON.stringify(ev.dataTransfer));
}
</script>
</head>
<body>
<div id="droparea"
style="border: 1px solid #000000; width: 100px; height: 100px;"
ondrop="drop(event)"
ondragover="allowDrop(event)">drop area</div>
</body>
通常，我应该在“drop”函数中使用“files”属性不为 null 的 json 对象“ev.dataTransfer”，因为它发生在普通的 webkit 浏览器中，然后进行上传(此处不存在)。
我应该用 Java 实现更多东西吗？ ;(
各种帮助将不胜感激:)谢谢
最佳答案
这不是开箱即用的，请参见此处: https://bugs.openjdk.java.net/browse/JDK-8096939
您必须处理 Webview 上的事件并将它们重新注入(inject)浏览器组件 (WebEngine)。 下面是一个例子。我将它与 Angular2 和 ng2-file-upload 插件 ( https://github.com/valor-software/ng2-file-upload ) 一起使用。
使用 new WebViewWithFileDragEvents(webView) 在您的 WebView 中安装事件。它不漂亮，但对我有用。
import static java.lang.String.format;
import java.io.File;
import java.util.Arrays;
import java.util.stream.Collectors;
import javafx.scene.input.DragEvent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.web.WebView;
public class WebViewWithFileDragEvents {
private final WebView webview;
public WebViewWithFileDragEvents(WebView webview) {
this.webview = webview;
this.webview.getEngine().setJavaScriptEnabled(true);
this.webview.setOnDragOver(this::handleOnDragOver);
this.webview.setOnDragDropped(this::handleOnDragDropped);
}
private void handleOnDragOver(DragEvent e) {
Dragboard db = e.getDragboard();
if (db.hasFiles()) {
e.acceptTransferModes(TransferMode.COPY);
injectDragOverEvent(e);
} else {
e.consume();
}
}
private void injectDragOverEvent(DragEvent e) {
inject(join("",
"{",
" var newElement=document.elementFromPoint(%d,%d);",
" if (window.lastInjectedEvent && window.lastInjectedEvent != newElement) {",
" //fire dragout",
" window.lastInjectedEvent.dispatchEvent(%s)",
" }",
" window.lastInjectedEvent = newElement",
" newElement.dispatchEvent(%s);",
"}"),
(int) e.getX(), (int) e.getY(), dragLeaveEvent(e), dragOverEvent(e));
}
private String join(String... lines) {
return String.join("\n", Arrays.asList(lines));
}
private void inject(String text, Object... args) {
webview.getEngine().executeScript(String.format(text, args));
}
private String dragLeaveEvent(DragEvent e) {
return join("",
"function() {",
" var e = new Event('dragleave');",
" e.dataTransfer={ types: ['Files']};",
" return e;",
"}()");
}
private String dragOverEvent(DragEvent e) {
return join("",
"function() {",
" var e = new Event('dragover');",
" e.dataTransfer={ types: ['Files']};",
" return e;",
"}()");
}
private String dropEvent(DragEvent e) {
String files = e.getDragboard().getFiles()
.stream()
.map(File::getAbsolutePath)
.map(f -> "{ name: '" + f + "'}")
.collect(Collectors.joining(",", "[", "]"));
return format(join("",
"function() {",
" var e = new Event('drop');",
" e.dataTransfer={ files: %s};",
" return e;",
"}()"),
files);
}
private void handleOnDragDropped(DragEvent e) {
boolean success = false;
if (e.getDragboard().hasFiles()) {
success = true;
injectDropEvent(e);
}
e.setDropCompleted(success);
e.consume();
}
private void injectDropEvent(DragEvent e) {
inject(join("",
"{",
" var newElement=document.elementFromPoint(%d,%d);",
" newElement.dispatchEvent(%s);",
"}"),
(int) e.getX(), (int) e.getY(), dropEvent(e));
}
}
关于JavaFx Webview HTML5 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24655437/