我一直试图在 false 上移动一个无框窗口，但现在我想通过拖动一个元素（标题栏）来移动整个窗口，我试过-webkit-app-region: drag;但似乎不起作用，我也试过https://www.npmjs.com/package/electron-drag但它也不起作用。
如何在不使用 -webkit-app-region 的情况下在 Electron 中移动无框窗口
IT技术
javascript
css
node.js
reactjs
electron
2021-05-14 11:58:01
3个回答
由于您的窗口是无框的，您可以使用-webkit-app-region有效的属性，即使您的 IDE 说它不是。出于用户体验的考虑，您应该禁止文本选择并拖动标题栏内的按钮。
.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
首先创建您的应用程序窗口，在您的 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)
我遇到了同样的问题，在打开开发人员工具窗口 (Ctrl+Shift+I) 后，我注意到内联代码被内容安全策略阻止。
解决方案是将 css 移动到外部文件中
索引.html
<link rel="stylesheet" type="text/css" href="style.css"/>
样式文件
.draggable {
-webkit-user-select: none;
user-select: none;
-webkit-app-region: drag;
}
现在任何带有可拖动类的东西都是可拖动的，并防止文本被选中