看完本文你可学会
- 对于进程通信有基本的一个了解
- 学会自定义的顶部栏如何实现拖拽功能
前情提要
对于一些进程通信的基本demo可以去看下我的这个文章：手把手带你快速入门Electron
实现拖拽功能
首先我们当然要在配置中将他自带的顶部栏禁用掉
代码语言：javascript复制...
frame:false,
...
然后去到我们的index.html，去用div画个header
<div class="header"></div>
随便给个黑色就行
接着我们要监听三个事件：mousedown mouseup mousemove
来确定鼠标点击、鼠标移动以及鼠标松开时候的坐标。
这时候我们来设定一些变量
代码语言：javascript复制let isDown = false; // 鼠标状态
let baseX = 0,baseY = 0; //监听坐标
接下来是mousedown事件：
header.addEventListener('mousedown',function(e){
isDown = true
baseX = e.x
baseY = e.y
})
1.gif
可以看到每次点击黑色的顶部栏都有坐标在右边打印出来
开启控制台快捷键 ctrl shift i
然后我们要做的就是在移动中获取窗口实时的位置，首先要来明白这一点
image.png
把屏幕当成坐标轴，我们最后需要的其实是(screenX - baseX) , (screenY - baseY)
所以我们这样写
代码语言：javascript复制 document.addEventListener('mousemove',function(e){
if(isDown){
const x = e.screenX - baseX
const y = e.screenY - baseY
ipcRenderer.send('move-application',{
posX:x,
posY:y
})
}
})
算出x,y的坐标并发送到主进程，不知道这个如何通信的也可以去看我之前快速入门那个文章。
下面在主进程中接收，并使用setPosition方法实时设置位置就行了。
ipcMain.on('move-application',(event,pos) => {
mainWin && mainWin.setPosition(pos.posX,pos.posY)
})
我们打印一下pos 看看：
可以看到我们控制台上疯狂滚动的坐标，证明我们的操作没有错误。
最后不要忘记鼠标抬起的时候将isDown设置回去。
document.addEventListener('mouseup',function(){
isDown = false
})
至此，我们的拖拽就成功了，学会了吗？
Electron系列文
- 手把手带你快速入门Electron)
- 包包yyds：从 Electron 架构出发，深究 Electron 跨端原理 | 多图详解
- 小f的插件配上猪皮的文：vue electron 开发一个实时监测github的跨端桌面应用
最后
我是 Ned 一个被疫情耽误了好几年的、即将大四了的大学生。
