使用 Electron 构建桌面应用（拖动控制篇）

使用 Electron 构建桌面应用（拖动控制篇）

当窗口被定义了大小，我们也就是在自定义这个窗口，使得它不可拉伸没有框架，让它看起来就像一个真正的声效器浮在桌面上。

现在问题来了 – 要如何移动或者关闭一个没有标题栏的窗口。

很快我就会说到自定义窗口（和应用）的关闭动作，还会谈到如何在主进程和渲染器进程中通信。不过现在让我们先把目光聚焦到“拖拽效果”上。你可以在 app/css 目录下找到 index.css 文件：

html,
body {
    ...
    -webkit-app-region: drag;
    ...
}

-webkit-app-region: drag;把整个 html 都变成了一个可拖拽的对象。现在问题来了，在可拖拽的对象上你怎么点击啊？！好的，可能你会想到把 html 中某个部分的这个属性值设置为no-drag;，那就允许该元素不可拖拽（但可以点击了）。让我们想想下面这段 index.css 片段：

.button-sound {
    ...
    -webkit-app-region: no-drag;
}