问题描述

我一直试图在 false 上移动无框窗口，但现在我想通过拖动一个元素(标题栏)来移动 整个 窗口，我已经尝试过 -webkit-app-region: drag; 但它似乎不起作用，我也尝试过 http://www.51sjk.com/Upload/Articles/1/0/336/336075_20221103095722511.jpg 但它也不起作用.

I've been trying to move a frameless window on false but now I want to move the whole window just by dragging one element (the title bar), I've tried -webkit-app-region: drag; but it doesn't seem to work, I've also tried http://www.51sjk.com/Upload/Articles/1/0/336/336075_20221103095722511.jpg but it does't work either.

推荐答案

由于您的窗口是无框的，您可以使用属性 -webkit-app-region 有效，即使您的 IDE 说它不是.出于用户体验的考虑，您应该禁止文本选择并拖动标题栏内的按钮.

Since your windows are frameless you can use the property -webkit-app-region which is valid even though your IDE says it's not. You just should forbid the text selection and drag on buttons inside of your title bar too out of UX concerns.

.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

The API documentation mentions this too https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#draggable-region