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

看完本文你可学会

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

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

前情提要

对于一些进程通信的基本 demo 可以去看下我的这个文章：手把手带你快速入门Electron

实现拖拽功能

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

...frame:false,...

然后去到我们的index.html，去用 div 画个 header

<div class="header"></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 一个被疫情耽误了好几年的、即将大四了的大学生。

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

你可以在公众号：前端成长日记 里找到我~