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