原生文件拖放¶

概述¶

某些需要操作文件的应用可能希望支持操作系统的原生文件拖放功能。将文件拖入 Web 内容很常见，许多网站都支持。Electron 还支持将文件和内容从 Web 内容拖出到操作系统环境中。

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

示例¶

示例演示如何即时创建一个文件，以便将其从窗口中拖出。

Preload.js¶

在 preload.js 中，使用 [contextBridge][] 注入一个 window.electron.startDrag(...) 方法，该方法会向主进程发送 IPC 消息。

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electron', {
  startDrag: (fileName) => ipcRenderer.send('ondragstart', fileName)
})

Index.html¶

在 index.html 中添加一个可拖拽元素，并引用你的渲染进程脚本：

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

Renderer.js¶

在 renderer.js 中，设置渲染进程以处理拖拽事件，调用上面通过 [contextBridge][] 添加的方法。

```js @ts-expect-error=[3] document.getElementById('drag').ondragstart = (event) => { event.preventDefault() window.electron.startDrag('drag-and-drop.md') }

### Main.js {#mainjs}

在主进程（`main.js` 文件）中，扩展接收到的事件，添加正在拖拽的文件路径和图标：

```fiddle docs/fiddles/features/drag-and-drop
const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')
const fs = require('node:fs')
const https = require('node:https')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
const icon = fs.createWriteStream(iconName)

// Create a new file to copy - you can also copy existing files.
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')

https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
  response.pipe(icon)
})

app.whenReady().then(createWindow)

ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: path.join(__dirname, filePath),
    icon: iconName
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

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

将文件拖入你的应用¶

你可以使用标准的 Drag and Drop web API 将文件拖放到你的应用中。

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 el/electron