快速入门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
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fD1EvoPA-1658835190156)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0ac54d9c86943d98cbb202d0c290262~tplv-k3u1fbpfcp-watermark.image?)]

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

开启控制台快捷键 ctrl shift i

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlY3EnqX-1658835190158)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a898afa4c8048d0aaa1ac856a2491e8~tplv-k3u1fbpfcp-watermark.image?)]

把屏幕当成坐标轴，我们最后需要的其实是(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 看看：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxstxJ2i-1658835190159)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b563a93276ef4243833a0ef8c3aa24bf~tplv-k3u1fbpfcp-watermark.image?)]
可以看到我们控制台上疯狂滚动的坐标，证明我们的操作没有错误。

最后不要忘记鼠标抬起的时候将isDown设置回去。

document.addEventListener('mouseup',function(){
  isDown = false
})

至此，我们的拖拽就成功了，学会了吗？

Electron系列文

• 手把手带你快速入门Electron)

最后

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

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

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