electron无边框窗口的拖拽问题

大佬教程收集整理的这篇文章主要介绍了electron无边框窗口的拖拽问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

继续玩耍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下通信的问题请看后面的文章。

大概代码@R_197_9811@：

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。

大佬总结

以上是大佬教程为你收集整理的electron无边框窗口的拖拽问题全部内容，希望文章能够帮你解决electron无边框窗口的拖拽问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。