使用 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;
}