electron 无边框窗口拖拽移动问题记录及解决办法

最新推荐文章于 2025-05-30 09:53:22 发布

IT老大哥

最新推荐文章于 2025-05-30 09:53:22 发布

阅读量3.3k

点赞数 8

CC 4.0 BY-SA版权

文章标签： electron javascript 前端

本文链接：https://blog.youkuaiyun.com/wanglong126/article/details/131270966

在开发uTools插件时，作者遇到一个挑战：创建无标题栏的悬浮文本窗口并使其可拖动。首先尝试使用CSS的`-webkit-app-region:drag`，但在Windows上发现光标样式缺失。接着，作者通过监听鼠标事件自行实现了拖动功能，但遇到窗口尺寸变化的问题。最后，作者发现问题是由于Windows的缩放与布局设置导致的，通过调整代码使用`setBounds`来同时设置位置和尺寸，解决了窗口尺寸变化的问题，尽管快速拖动时仍存在闪烁和文本框内容选中的小问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做一款uTools的插件,悬浮文本

窗口是没有标题栏的,所以需要找一个地方可以拖动移动位置

就开始了接下来的踩坑记录

项目结构

只是一个简单的容器元素,一个多行文本框

容器元素加一个内边距,然后这个内边距区域就是我理想的可拖动位置

<body>
  <div id="container">
    <textarea id="content" spellcheck="false"></textarea>
  </div>
</body>

实现流程

webkit-app-region

首个版本,我采用CSS很简单便实现了

当时是用 Mac 开发测试的,一切运行良好

#container {
   
   
	-webkit-app-region: drag;
	padding: 10px;
	cursor: move;
}

隔天到 Win 上看效果

发现拖动虽然正常,但是光标样式没有了

鼠标放在边框位置不会变成移动的光标

经查阅,设置了-webkit-app-region: drag;的元素,不会在响应鼠标事件了(mac上测试的时候正常的)

so,需要继续改了

鼠标事件

没有简便办法了,就只好自己写个鼠标拖拽事件了

按下记录下鼠标相对于窗口的位置

鼠标移动后计算出窗口新的位置

窗口新

最低0.47元/天解锁文章

200万优质内容无限畅学