原生文件拖 & 放

    要在您的应用中实现此功能，您需要调用 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 添加的方法来设置渲染器进程处理拖动事件。

    docs/fiddles/features/drag-and-drop (23.0.0)

    • main.js
    • preload.js
    • index.html
    • renderer.js
    1. const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
    2. const path = require('path')
    3. const fs = require('fs')
    4. const https = require('https')
    6. function createWindow() {
    7.   const win = new BrowserWindow({
    8.     width: 800,
    9.     height: 600,
    10.     webPreferences: {
    11.       preload: path.join(__dirname, 'preload.js')
    12.     }
    14.   win.loadFile('index.html')
    17. const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
    18. const icon = fs.createWriteStream(iconName);
    20. // Create a new file to copy - you can also copy existing files.
    21. fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
    22. fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
    24. https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
    25.   response.pipe(icon);
    26. });
    28. app.whenReady().then(createWindow)
    30. ipcMain.on('ondragstart', (event, filePath) => {
    31.   event.sender.startDrag({
    32.     file: path.join(__dirname, filePath),
    33.     icon: iconName,
    34.   })
    35. })
    38.     app.quit()
    39.   }
    40. })
    42. app.on('activate', () => {
    43.   if (BrowserWindow.getAllWindows().length === 0) {
    44.     createWindow()
    45.   }
    46. })
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    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>
    12.     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
    13.     <script src="renderer.js"></script>

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