使用Electron实现拖动HTML元素至桌面以复制本地文件

正在设计一款基于Electron的音乐播放器应用，旨在展示和管理用户硬盘中的音乐文件。
为了增强用户体验，考虑加入拖放功能，允许用户直接从应用界面拖拽包含音乐信息的HTML元素（例如：艺术家 - 曲目名）到桌面上，从而自动复制对应的音乐文件到指定位置。

例如，如果用户拖动艺术家 - 曲目名从应用窗口到桌面，系统应在桌面上创建该音乐文件的一个副本，路径为：C:\ Users \ User \ Desktop \ Artist-TrackName.mp3。

实现此功能的关键在于正确配置Electron的拖放事件处理程序。

解决方案:

以下是一个可行的代码示例：

在main.js中添加如下代码，以设置拖动开始时的行为及显示的图标（yourAppDir\ img \ icon \ folder.png）：

const {ipcMain} = require('electron');
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: 'img/icon/folder.png'
});
});


在renderer.js中，为拖动操作设定相应的文件路径：

const ipcRenderer = require('electron').ipcRenderer;
document.getElementById('drag').Ondragstart= (event) => {
event.preventDefault();
ipcRenderer.send('ondragstart', 'C:\ Users \ User \ dev \ test \ electron-drag-out-test \ img \ icon \ folder.png');
};


同时，在index.html的body部分添加可拖动的元素：

...

...
拖动项目

...


此外，还提供了一个GitHub Gist链接，其中包含了拖入/拖出功能的完整实现。

参考资源：Electron官方文档 - 添加webContents.startDrag(item) API