nw.js FrameLess Window下的視窗拖拽與視窗大小控制
很多時候，我們覺得系統的Frame框很難看，于是想自定義。
自定義Frame的第一步是在package.config檔案中将frame選項設定為false。
{
"name": "1",
"main": "index.html",
"nodejs": true,
"single-instance": false,
"chromium-args" : "--enable-webgl --ignore-gpu-blacklist",
"window": {
"show":true,
"title": "AxeSlide",
"toolbar": true,
"width":1000,
"height":400,
"resizable":true,
"show_in_taskbar":true,
"frame":false,
"kiosk":false,
"icon": "resources/img/axeslide.png",
"position":"center"
},
"webkit":{
"plugin":true
}
}
修改配置檔案之後，我們看到的是下面的視窗。
無frame視窗是沒有辦法進行拖拽的，這肯定很不爽了，下面我們可以添加下面的樣式到body上，實作整個視窗的拖動。
body {
-webkit-app-region: drag;
}
到此，我們的無邊框窗體已經建成了，拖拽視窗的問題已經解決了，一切似乎完美了，就這麼簡單。不過當我們“手賤”地去輕按兩下下視窗的時候，視窗自動最大化了。其實這是nw.js優化過後的一個功能，在早期版本的時候，無邊框視窗，輕按兩下是沒有任何反應的，很多使用者提了bug，作者于是添加了這個功能。但是不是任何時候，我們都需要最大化的，比如自定義了一個登入窗，我們想保持固定的大小怎麼辦？
我首先想到的是監聽Click事件，如下：
document.onclick = function (e) {
e.preventDefault();
}
添加之後呢，然而并沒有卵用，現在已經确認是nw.js的一個bug，據說在0.13版本修複了，不過還處于beta階段。
一招不行，再來一招，可不可以通過設定最大，最小寬高都一樣的方式解決呢？
繼續修改配置檔案。
此時我們再次測試，發現輕按兩下之後确實沒有最大化了，不過視窗的位置卻偏移到了螢幕的左上角。
這當然也不是我們需要的，那麼就沒辦法處理了嗎？既然預設的處理方式不行，自己動手豐衣足食吧，捕獲Click和MouseMove事件，自己實作拖拽也不是很困難的，說幹就幹。先去掉原來用于body上執行拖拽的樣式，然後添加下面的代碼。
<script>
var gui = require('nw.gui')
var win = gui.Window.get()
var $win = window
var $nav = document.body;
var dragging = false
var mouse_x, mouse_y
var win_x, win_y;
$nav.onmousedown= function (e) {
e = e.originalEvent || e
var isbg = $(e.target).closest('.navbar-nav, #form-user').length < 1
if (!isbg) return
dragging = true
mouse_x = e.screenX
mouse_y = e.screenY
win_x = win.x
win_y = win.y
};
$win.onmousemove=function (e) {
if (!dragging) return
win.x = win_x + (e.screenX - mouse_x)
win.y = win_y + (e.screenY - mouse_y)
};
$win.onmouseup=function () {
dragging = false
</script>
拖拽前視窗在左上角。
拖拽後。
ok，是不是完美的解決問題了呢？
nw.js，electron交流群 313717550。
本文轉自玄魂部落格園部落格，原文連結：http://www.cnblogs.com/xuanhun/p/5134010.html，如需轉載請自行聯系原作者