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

【问题标题】：How do I move a frameless window in Electron without using -webkit-app-region如何在不使用 -webkit-app-region 的情况下在 Electron 中移动无框窗口
【发布时间】：2017-12-02 18:19:59
【问题描述】：

我一直试图在 false 上移动无框窗口，但现在我想通过拖动一个元素（标题栏）来移动整个窗口，我试过 -webkit-app-region: drag; 但是它似乎不起作用，我也尝试过https://www.npmjs.com/package/electron-drag，但它也不起作用。

【问题讨论】：

请阅读帮助部分，了解如何提问
什么？问题很清楚，“我不能在 Electron 上移动无框窗口”wtf 有什么难的地方
本教程展示了如何创建一个可拖动的标题栏，它使用了 -webkit-app-region: drag; css 属性，你可能做错了：ourcodeworld.com/articles/read/287/…
重点是，如果您展示您尝试过的内容，而不是随机一行，那么我们可能会看到其他可能对您有所帮助的内容
只是因为webstorm不知道这个属性它仍然可以有效。

标签： javascript css node.js reactjs electron

【解决方案1】：

由于您的窗口是无框的，您可以使用属性-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

【讨论】：

那么请设置一个 repo，因为这是正确的方法。如果不看你的代码，这个问题是不可理解的。

【解决方案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)

【讨论】：

来自 vuejs 应用程序，将其插入 index.html 文件到正文开头的脚本标记 html 中。效果很好。

【解决方案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;
}

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

【讨论】：