我将如何在电子中制作可拖动的无框窗口答案

【问题标题】：How would I go about making a draggable frameless window in electron我将如何在电子中制作可拖动的无框窗口
【发布时间】：2021-05-14 01:51:35
【问题描述】：

我一直在互联网上搜索如何在电子中制作可拖动的无框窗口，我一直在到处寻找相同的解决方案，但它对我不起作用。

这是我的 HTML 代码：

<header id="titlebar">
    <div id="drag-region">
        <img src="images/check_icon.svg" alt="icon" id="icon">
        <p id="title">to do app</p>
    </div>
</header>

这是我的 CSS 代码：

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

我在终端中没有收到任何错误，但是当我将鼠标悬停在-webkit-user-select: none; 上时，会弹出一条消息说Also define the standard property 'user-select' for compatibilitycss(vendorPrefix)。我没有弄乱它，因为我不知道它是什么意思，它也能发挥作用。

我只是想知道我的 html 或 css 代码是否有任何问题，以及为什么无框窗口不可拖动。如果有的话，我也在寻找任何替代方法。

【问题讨论】：

标签： javascript html css electron frameless

【解决方案1】：

你可能需要安装 webkit：

npm install webkit

我认为是这样的，因为您使用的是 webkit CSS 标签

【讨论】：

【解决方案2】：

我刚刚尝试过，它在这里工作是我如何做到的步骤。首先，我将 webkit 安装到项目中，然后将
id="drag-region"
添加到主 <html> 标记然后我将其添加到 css
#drag-region{ -webkit-user-select: none; -webkit-app-region: drag; }
之后它对我有用:)

【讨论】：