Electron中文文档

新手 685983304  中级 642625556 高级 602866851 Q群区别? 征集友情链接公告

推荐版:3.0.10   测试版:4.0.0-beta.8   极客版:4.0.0-nightly.20181010  

原生文件拖放

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

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

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

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

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

const { ipcMain } = require('electron')

ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: '/path/to/icon.png'
  })
})


相关npm包集合




相关站点资源





官方指南

常见问题 (FAQ)

指南和教程

详细教程

API 参考

自定义 DOM 元素:

主进程可用的模块:

渲染进程(网页)可用的模块:

两种进程都可用的模块:

开发

  • mac 系统,electron 使用 packager 构建 exe 程序
  • electron 如何禁用文件拖放事件?
  • JS开发者社区

    和大家在一起

    新手/1元新手 685983304 
    中级/5元 中级 642625556
    高级/50元 高级 602866851