将 html 元素拖到 electron window 之外以复制本地文件？

Question

我打算用electron实现一个音乐播放器。它将列出用户硬盘中的音乐。
是否可以定义拖放行为以便我可以拖动 html 元素，例如<span>Artist – Title</span>外electronwindow到用户桌面复制实际文件？

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

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

Answer 1

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

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

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

Answer 2

工作示例：

放入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，并设置要退出的文件路径：

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 标签内创建可拖动元素

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

我还创建了一个 gist 用于拖入/拖出。

另一个有用的资源：Electron – Add webContents.startDrag(item) API

将 html 元素拖到 electron window 之外以复制本地文件？

Drag html element outside electron window to copy local file?

javascript

macos

drag-and-drop

node.js

electron