在Electron中简单实现拖拽功能

背景

实现简单的拖拽文件、图片到系统本地，拖拽消息体文本发送（类似于微信、QQ中的功能）

实现拖拽到本地系统，不考虑mouse实现方式，使用Electron中的startdrag配合Browser的Drag and Drop

startdrag

Electron API (startDrag) 提供拖拽文件到桌面系统本地的能力

使用情况比较简单，主进程监听事件，调用startdrag

// main-process
ipcMain.on('drag-start', (event) => {
   
    event.sender.startdrag({
   
        file: 'drag-start.md', // string | string[]
        icon:'icon.png'
    })  
    return true
})

子进程IPC通信主进程，

// render.js
await ipcRenderer.invoke('drag-start')
// dragend 处理逻辑

startdrag的一些问题：

• 因为startDrag是直接使用V8提供的能力，所以这里会覆盖html5的 draggable事件，如event.dataTransfer.setData()设置的数据会被覆盖

• 如果需要监听dragend事件，需要在event.sender.startdrag 后通知到子进程，表示拖拽操作已结束

• icon定制比较简陋，不能像html5 draggable那样默认使用DOM渲染半透明图

• startdrag在 Window系统中一次只能拖动一个文件

• 鼠标光标手势是个加号图标，等同于 event.dataTransfer.effectAllowed = 'move'

• window、 mac中icon 位置有差异，分别在左右两边

HTML5 Drag and Drop

判断存在本地文件路径时，使用startdrag，否则默认执行html5的draggable操作

// render.js
const filePath = getFilePathSync()
if(filePath) {
   
    //阻止默认操作
    event.preventDefault()
    // 发送IPC
    await ipcRenderer.invoke(