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文件中创建一个HTML元素（例如），其-webkit-app-region属性设置为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)

Answer 3

我遇到了同样的问题，在打开开发者工具窗口 (Ctrl+Shift+I) 后，我注意到内联代码被内容安全策略阻止。

解决方案是将 css 移动到外部文件中

index.html

<link rel="stylesheet" type="text/css" href="style.css"/>

style.css

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

现在任何带有 draggable 类的东西都是可拖动的，并防止文本被选中

如何在不使用-webkit-app-region

3 个答案: