拖动电子窗口外的HTML元素复制本地文件？

我打算用电子来实现一个音乐播放器。 它将列出来自用户硬盘的音乐。
是否可以定义drag'n'drop行为，以便我可以将电子窗口外的html元素（例如<span>Artist – Title</span>拖到用户桌面上以复制实际文件？

文件存储在这里： ~/music/Artist-Title.mp3 。

当从我的电子窗口拖放span到桌面上时，应该制作副本： ~/Desktop/Artist-Title.mp3 。

我相信这是你正在寻找的API。

http://electron.atom.io/docs/api/web-contents/#contentsstartdragitem

remote.getCurrentWebContents().startDrag({ file: 'path/to/file', icon: 'path/to/file/icon', });

工作示例：

放入main.js并拖动yourAppDir/img/icon/folder.png) （ 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 ，并将path设置为要删除的文件： 

 var ipcRenderer = require('electron').ipcRenderer document.getElementById('drag').ondragstart = (event) => { event.preventDefault() ipcRenderer.send('ondragstart', '/Users/tim/dev/test/elektron-drag-out-test/img/icon/folder.png') }

在index.html的body标签内创build可拖动的元素： 

 ... <body> ... <a href="#" id="drag" class="draggable">drag item</a> </body> ...

我也创build了一个拖/拖出的要点 。

另一个有用的资源： 电子 – 添加webContents.startDrag(item) API

Interesting Posts