electron无边框窗口的拖拽问题

2018年08月13日Web前端、桌面应用0

继续玩耍electron，当用到无边框窗口时，原本有的拖拽成了一个问题。

当new BrowserWindow时，设置了frame为false时，就能出现无边框的electron了，但是问题是如何拖动呢？

一、css处理方式

通过给body增加-webkit-app-region属性的方式，如下

body {
    font-size: 10px;
    height: 100%;
    font-family: 'monaco';
    -webkit-app-region: drag;
}

此时，鼠标在整个界面上都可以拖动了。

那么问题又来了，此时发现，鼠标的点击事件啥的都失灵了。。

还有，双击放大的这个功能本来是任务栏上的，现在直接在body上双击下，也有了这个功能。

二、利用鼠标事件

实际上我们可以计算鼠标的位置来给窗口重新设置位置，删除前面的css样式。

注：electron+React下通信的问题请看后面的文章。 大概代码是这样的：

let dragging = false, // 表示是否在拖拽中
    mouseX = 0, // 表示鼠标x轴位置
    mouseY = 0, // 表示鼠标y轴位置
    mainWindow = window.electron.remote.getCurrentWindow();

window.addEventListener('mousedown', function(e) {
    // 提前获得位置
    mouseX = e.pageX;
    mouseY = e.pageY;
    window.addEventListener('mousemove', mousemoveFn);
});

window.addEventListener('mouseup', function(e) {
    window.removeEventListener('mousemove', mousemoveFn);
});

function mousemoveFn(e) {
    let moveX = e.pageX - mouseX,
        moveY = e.pageY - mouseY,
        pos = mainWindow.getPosition(); // 当前窗口位置
    // 重新计算
    pos[0] = pos[0] + moveX;
    pos[1] = pos[1] + moveY;
    mainWindow.setPosition(pos[0], pos[1], true); // 重新设置窗口的位置
    mouseX = e.pageX;
    mouseY = e.pageY;
}

我们通过对鼠标事件的监听以及计算，再重新设置给窗口，使得窗口与鼠标同步。

实际效果并不理想，跟随比较慢且会来回闪烁。

三、设置可拖动的区域

我们可以在title上给定一个类似于导航栏一样的长条，这块区域内设置-webkit-app-region: drag;在配置自己加上最大化，最小化，关闭事件，最大的简化并个性化自己的程序。

可以查看下我的 https://github.com/2fps/never-forget 这个项目，就是设置了个可拖拽的title区域，欢迎star。

Electrontips

目录