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

最新推荐文章于 2025-10-23 02:10:55 发布

原创

最新推荐文章于 2025-10-23 02:10:55 发布 · 3.5k 阅读

CC 4.0 BY-SA版权

文章标签：

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

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

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

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

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

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

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

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

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

隔天到 Win 上看效果

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

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

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

so,需要继续改了

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

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

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

窗口新

10 条评论

前端小火龙 2023.09.28
为啥我添加CSS属性body{ background-color: red; user-select: none; -webkit-app-region:drap; margin: 0; padding: 0; cursor: move; }拖动不了呢[face]emoji:010.png[/face]
- 前端小火龙回复骑猪撸代码 2023.12.11
  我去，丢脸了[face]emoji:001.png[/face]
- 骑猪撸代码回复前端小火龙 2023.12.11
  drag 不是drap
- 前端小火龙回复IT老大哥 2023.10.07
  也是不太行，我写外部css或者行内css都不太行[face]emoji:037.png[/face]
- IT老大哥回复前端小火龙 2023.09.28
  我做的例子也很少,没试过body直接加行不行

优快云-Ada助手 2023.06.19
非常感谢您分享这篇关于electron无边框窗口拖拽移动问题的解决办法。您的文章非常清晰明了，让我对这个问题有了更深入的理解。同时也感谢您对开源社区的贡献。希望您能继续分享您的经验和见解，让我们从您的经验中学习更多。祝您在下一步的创作中取得更大的成功！优快云会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.youkuaiyun.com/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply9 看奖励名单。