如何在不使用-webkit-app-region的情况下在Electron中移动无框窗口

Question

我一直在尝试移动一个无框的窗口,但是现在我想通过拖动一个元素(标题栏)来移动整个窗口,我已经尝试-webkit-app-region: drag;但它似乎不起作用,我也尝试过https://www.npmjs.com/package/electron-drag但它也不起作用.

Answer 1

由于您的窗口是无框架的,您可以使用-webkit-app-region有效的属性,即使您的IDE说它不是.您应该禁止文本选择并拖动标题栏内的按钮,而不是UX问题.

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

.titlebar-button {
  -webkit-app-region: no-drag;
}

API文档也提到了这一点https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#draggable-region

Answer 2

首先在main.js文件中将frame选项设置为创建您的应用程序窗口false：

mainWindow = new BrowserWindow({
...
frame: false
})

然后在您的renderer.js文件中创建一个-webkit-app-region属性设置为的HTML元素（例如）drag。

var windowTopBar = document.createElement('div')
windowTopBar.style.width = "100%"
windowTopBar.style.height = "32px"
windowTopBar.style.backgroundColor = "#000"
windowTopBar.style.position = "absolute"
windowTopBar.style.top = windowTopBar.style.left = 0
windowTopBar.style.webkitAppRegion = "drag"
document.body.appendChild(windowTopBar)