1.0.3 • Published 2 months ago
electron-drag-window v1.0.3
electron-drag-window
用于 Electron 在不使用 -webkit-app-region 的情况下实现窗体移动
Electron 利用 -webkit-app-region 去区分可拖拽和不可拖拽。可拖拽区域会不触发鼠标事件，在一些业务场景下无法满足需求，因此写了该库去替代原方案，建议结合 -webkit-app-region 一起使用
如果对你有帮助，可以的话给我一个 star 谢谢
效果展示
也可以亲自下载体验一下 typhon-note-release
安装
npm i electron-drag-window
or
yarn add electron-drag-window实现
几个关键
onmousedown事件委托获取鼠标坐标requestAnimationFrame配合ipc实时与主进程通讯screen.getCursorScreenPoint()获取鼠标坐标win.setPosition更改窗体坐标，达到移动窗体的效果
具体实现直接看源码，很简单的
使用
主进程 main process
在你的主进程启动文件中
import { onWindowDrag } from "electron-drag-window/electron"
...
app.whenReady().then(()=> {
...
onWindowDrag()
...
})渲染进程 renderer process
参数
ipcRenderer.send，因为在绝大部分项目中ipcRenderer是由preload注入，因此这里是由外部传入，而非包内直接引入options自定义选项
options
| 参数名 | 类型 | 是否可选 | 默认值 | 作用 |
|---|---|---|---|---|
| igTagNames | string[] | 可选 | ['INPUT'] | 忽略拖拽操作的元素名 |
| dragMode | ElectronDragWindow.DragMode | 可选 | ElectronDragWindow.DragMode.All | 拖拽元素模式: All 全局拖拽; Appoint 指定拖拽 |
| appointClassNames | string[] | 可选 | [] | Appoint 模式下，可拖拽的元素类名 |
| igClassNames | string[] | 可选 | ['ignoreMove'] | All 模式下，忽略拖拽操作的元素类名 |
在你的渲染进程中
import { bindDragEvent } from "electron-drag-window/renderer"
// 替换成自身项目中的 ipcRenderer.send 方法
bindDragEvent(IpcRendererSend.originSend, options)注意
该方法是通过绑定 mousedown 事件于 body 上，并通过事件委托的形式去处理，因此单个窗体仅需要初始化一次即可