『快速入门electron』之实现窗口拖拽

看完本文你可学会

• 对于进程通信有基本的一个了解

• 学会自定义的顶部栏如何实现拖拽功能

前情提要

对于一些进程通信的基本demo可以去看下我的这个文章：

手把手带你快速入门Electron

实现拖拽功能

首先我们当然要在配置中将他自带的顶部栏禁用掉

...
frame:false,
...


然后去到我们的

index.html

，去用div画个header

<div class=&quot;header&quot;></div>


随便给个黑色就行

接着我们要监听三个事件：

mousedown

 

mouseup

 

mousemove

来确定鼠标点击、鼠标移动以及鼠标松开时候的坐标。

这时候我们来设定一些变量

let isDown = false; // 鼠标状态
let baseX = 0,baseY = 0; //监听坐标


接下来是

mousedown

事件：

header.addEventListener('mousedown',function(e){
 isDown = true 
 baseX = e.x
 baseY = e.y
})


可以看到每次点击黑色的顶部栏都有坐标在右边打印出来

开启控制台快捷键 ctrl shift i

然后我们要做的就是在移动中获取窗口实时的位置，首先要来明白这一点

把屏幕当成坐标轴，我们最后需要的其实是

(screenX - baseX) , (screenY - baseY)

所以我们这样写

 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

 一个被疫情耽误了好几年的、即将大四了的大学生。

关注我，一起努力学习吧！

你可以在公众号：

前端成长日记

 里找到我~