作為桌面程序，當(dāng)然希望能夠?qū)崿F(xiàn)操作系統(tǒng)的 drag & drop 功能。 很多網(wǎng)站已經(jīng)支持拖拽文件， Electron 當(dāng)然也支持
要在您的應(yīng)用中實(shí)現(xiàn)此功能，您需要調(diào)用 webContent.startDrag(item) API 響應(yīng) ondragstart 事件。
一個(gè)演示如何動態(tài)創(chuàng)建要從窗口中拖出的文件的示例。
Preload.js
在 preload.js 中使用 contextBridge 注入方法 window.electron.startDrag(...) 將向主進(jìn)程發(fā)送IPC消息。
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electron', {
startDrag: (fileName) => {
ipcRenderer.send('ondragstart', path.join(process.cwd(), fileName))
}
})
Index.html
添加一個(gè)可拖動元素到 index.html, 并引用你的渲染器腳本：
<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">拖動我</div>
<script src="renderer.js"></script>
Renderer.js
在 renderer.js 通過調(diào)用通過上述 contextBridge 添加的方法來設(shè)置渲染器進(jìn)程處理拖動事件。
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
window.electron.startDrag('drag-and-drop.md')
}
Main.js
在主進(jìn)程中(main.js 文件)，將收到的事件帶上文件路徑和圖標(biāo)擴(kuò)展到正在拖動的文件：
| main.js |
preload.js |
index.html |
renderer.js |
const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
const path = require('path')
const fs = require('fs')
const https = require('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()
}
})
|
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electron', {
startDrag: (fileName) => {
ipcRenderer.send('ondragstart', fileName)
}
})
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
<div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
<script src="renderer.js"></script>
</body>
</html>
|
document.getElementById('drag1').ondragstart = (event) => {
event.preventDefault()
window.electron.startDrag('drag-and-drop-1.md')
}
document.getElementById('drag2').ondragstart = (event) => {
event.preventDefault()
window.electron.startDrag('drag-and-drop-2.md')
}
|
啟動 Electron 應(yīng)用程序后，嘗試將該項(xiàng)從 BrowserWindow 拖放到桌面上。 在本指南中，本項(xiàng)是位于項(xiàng)目根目錄下的 Markdown 文件：
免費(fèi)AI編程助手
更多建議：