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

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

看完本文你可学会

对于进程通信有基本的一个了解
学会自定义的顶部栏如何实现拖拽功能

前情提要

对于一些进程通信的基本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 一个被疫情耽误了好几年的、即将大四了的大学生。

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

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