Electron中startDrag结束时是否有可监听拖拽结果的事件？

调用window.electron.startDrag()后，渲染进程的dragend事件会被Electron内部拖拽逻辑阻断，无法正常触发。你可以通过主进程监听WebContents的drag-end事件，再通过IPC把结果传给渲染进程的方式实现需求。

具体实现步骤： #

1. 渲染进程代码调整

移除原本的dragend监听，改为通过IPC接收主进程传来的拖拽结果：

const dropAreaRef = document.body;
dropAreaRef.addEventListener("dragstart", handleExport, false);

// 监听主进程发来的拖拽结果
window.electron.ipcRenderer.on('drag-result', (event, isSuccess) => {
  if (isSuccess) {
    console.log('文件拖拽成功');
  } else {
    console.log('拖拽操作已取消');
  }
});

function handleExport(e) {
  e.preventDefault();
  window.electron.startDrag(files);
}

2. 主进程代码配置

针对目标窗口的webContents监听drag-end事件，并将结果通过IPC发送给渲染进程：

const { app, BrowserWindow, ipcMain, path } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  // 监听webContents的drag-end事件
  mainWindow.webContents.on('drag-end', (event, isSuccess) => {
    mainWindow.webContents.send('drag-result', isSuccess);
  });

  // 监听渲染进程的start-drag请求
  ipcMain.on('start-drag', (event, files) => {
    event.sender.startDrag({
      files: files.map(file => file.path),
      icon: path.join(__dirname, 'drag-icon.png') // 可选：自定义拖拽图标
    });
  });
}

app.whenReady().then(createWindow);

3. Preload脚本配置（暴露IPC和startDrag能力）

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  startDrag: (files) => {
    ipcRenderer.send('start-drag', files);
  },
  ipcRenderer: {
    on: (channel, listener) => {
      ipcRenderer.on(channel, listener);
    }
  }
});

说明 #

主进程的webContents.drag-end事件会在拖拽操作完成（无论成功还是取消）时触发，isSuccess参数直接反映拖拽是否成功完成。这种方式绕开了渲染进程中被阻断的dragend事件，通过Electron的IPC机制实现进程间的结果传递。

内容的提问来源于stack exchange，提问作者Colmán Delarozière