• 原生文件拖放

    原生文件拖放

    作为桌面程序，当然希望能够实现操作系统的 drag & drop 功能。 很多网站已经支持拖拽文件 Electron 当然也支持

    要在 app 中实现此功能 ，你需要在 Render 进程中调用webContents.startDrag(item) API， 此API会给 Main 进程发送一个ondragstart事件。

    在 Render 进程中, 接收 ondragstart 事件并发送消息到 Main 进程。

    1. <a href="#" id="drag">item</a>
    2. <script type="text/javascript" charset="utf-8">
    3.   document.getElementById('drag').ondragstart = (event) => {
    4.     event.preventDefault()
    5.     ipcRenderer.send('ondragstart', '/path/to/item')
    6.   }
    7. </script>

    然后, 在主进程中，接收拖拽过来的文件路径和在拖拽过程中要显示的图标。

    1. const { ipcMain } = require('electron')
    3. ipcMain.on('ondragstart', (event, filePath) => {
    4.   event.sender.startDrag({
    5.     file: filePath,
    6.     icon: '/path/to/icon.png'
    7.   })
    8. })