原生文件拖 & 放

    要在您的应用中实现此功能，您需要调用 webContent.startDrag(item) API 响应 事件。

    示例

    一个演示如何动态创建要从窗口中拖出的文件的示例。

    添加一个可拖动元素到 index.html, 并引用你的渲染器脚本：

    1. <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">拖动我</div>
    2. <script src="renderer.js"></script>

    在 renderer.js 通过调用通过上述 contextBridge 添加的方法来设置渲染器进程处理拖动事件。

    • index.html
    • main.js
    • preload.js
    1. <!DOCTYPE html>
    2. <html>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7. </head>
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
    11.     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
    13. </body>
    14. </html>
    1. const { contextBridge, ipcRenderer } = require('electron')
    2. const path = require('path')
    4. contextBridge.exposeInMainWorld('electron', {
    5.   startDrag: (fileName) => {
    6.     ipcRenderer.send('ondragstart', fileName)
    7.   }

    启动 Electron 应用程序后，尝试将该项从 BrowserWindow 拖放到桌面上。 在本指南中，本项是位于项目根目录下的 Markdown 文件：