JavaFx Webview HTML5 DragAndDrop [英] JavaFx Webview HTML5 DragAndDrop
问题描述
通过此代码: http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm
我正在加载此html页面:
I'm loading this html page :
<!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>
通常，我应该在放置"功能中使用带有文件"属性的json对象"ev.dataTransfer"不为null，因为在普通的Webkit浏览器中会发生这种情况，然后进行上传(此处不存在).
Normaly, I should have in the "drop" function the json object "ev.dataTransfer" with "files" property not null as it happens with normal webkit browser then do the upload (not present here).
我应该在Java中实现更多功能吗? ;(
Should I implement something more in Java ? ;(
各种帮助将不胜感激:)谢谢
All kinds of help will be appreciated :) thanks
推荐答案
开箱即用，请点击此处: https://bugs.openjdk.java.net/browse/JDK-8096939
This doesn't work out of the box, see here: https://bugs.openjdk.java.net/browse/JDK-8096939
您必须处理Webview上的事件，然后将其重新注入浏览器组件(WebEngine). 下面是一个例子.我将此用于Angular2和ng2-file-upload插件( https://github.com/valor-software/ng2-file-upload ).
You must handle the events on the Webview and reinject them into the browser component (WebEngine). Below is an example. I'm using this with with Angular2 and the ng2-file-upload plugin (https://github.com/valor-software/ng2-file-upload).
使用new WebViewWithFileDragEvents(webView)将事件安装在WebView中.它不漂亮，但对我有用.
Use new WebViewWithFileDragEvents(webView) to install the events in your WebView. It is not pretty but works for me.
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 DragAndDrop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
