JavaFx Webview HTML5 DragAndDrop

Question

從以下代碼： 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>

Normaly，我應該在“drop”函數中將json對象“ev.dataTransfer”與“files”屬性不為null，因為它發生在普通的webkit瀏覽器然后進行上傳（此處不存在）。

我應該在Java中實現更多功能嗎？ （

各種幫助將不勝感激:)謝謝

Answer 1

這不是開箱即用的，請看這里： https ： //bugs.openjdk.java.net/browse/JDK-8096939

您必須處理Webview上的事件並將它們重新注入瀏覽器組件（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));

    }
}

Answer 2

我自己使用javafx瀏覽器示例時遇到了一些問題。 最后，我在我需要此功能的程序中使用了eclipse swt瀏覽器小部件。 也許值得一看。

http://www.eclipse.org/articles/Article-SWT-browser-widget/browser.html

編輯：只是為了添加一些信息，這個瀏覽器小部件可以選擇基於webkit，同時仍然提供與javafx一樣的交互方式。

JavaFx Webview HTML5 DragAndDrop

問題描述

2 個解決方案

解決方案1
3 2016-08-24 08:55:35

解決方案2
0 2014-07-09 14:11:10

JavaFx Webview HTML5 DragAndDrop

問題描述

2 個解決方案

解決方案1 3 2016-08-24 08:55:35

解決方案2 0 2014-07-09 14:11:10

解決方案1
3 2016-08-24 08:55:35

解決方案2
0 2014-07-09 14:11:10