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

最新推荐文章于 2025-05-15 15:41:47 发布
最新推荐文章于 2025-05-15 15:41:47 发布
阅读量3.3k 收藏 4
点赞数 8
CC 4.0 BY-SA版权
文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wanglong126/article/details/131270966

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

image

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

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

项目结构

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

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

<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 上看效果

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

image

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

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

so,需要继续改了

鼠标事件

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

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

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

窗口新

最低0.47元/天 解锁文章

200万优质内容无限畅学
IT老大哥
关注
Electron 应用开发实践指南 实战篇：自定义窗口的拖拽和缩放
sybh的博客
02-17 3857
默认情况，在构建的时候，会使用系统自带的原生窗口样式，比如在MacOS下的样式：在有些情况下，操作系统的原生窗口并不能符合我们的一些视觉和交互需求。所以，在使用electron创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。这个时候就需要用到自定义窗口。既然无法做到全屏拖拽移动窗口，那么有没有更好的办法呢？其实另一种方案就是自定拖拽移动，具体怎么做呢？Electron 需要拖拽的窗口的内容区域监听mousedown事件，如果是鼠标左键按下，则开启可拖拽开关。
Electron无边框窗口（最小化、最大化、关闭、拖动）
weixin_46852620的博客
01-30 2072
一、无边框窗口 要创建无边框窗口，只需在BrowserWindow的options中将frame设置为 false，通过将 transparent 选项设置为 true, 还可以使无框窗口透明 mainWindow = new BrowserWindow({ width: 800, height: 600, frame:false, transparent：true }) 二、可拖拽区 .titlebar { -webkit-app-region: drag; -webkit-us
Electron 无边框窗口开启全局拖拽
xionghnly的博客
08-21 4613
背景最近有个需求，Electron 打开的窗口要实现拖拽功能，大概看了一眼 BrowserWindow 的 API 却只找到了一个 move 事件，这个事件默认是针对有边框窗口的，也即...
electron拖动
最新发布
qq_39307266的博客
05-15 147
* 启用拖动区域 */要实现拖动整个应用程序，只需要添加css。
Electron无边框自定义窗口拖动
u014708123的博客
04-01 1775
最近使用了electron框架，发现如果自定义拖动是比较实用的;特别是定制化比较高的项目，如果单纯的使用-webkit-app-region: drag;会让鼠标事件无法触发;
electron关于无边框窗口无法拖拽移动以及点击事件失效的问题
qq_29965101的博客
10-09 2427
electron 项目 窗口无边框。但是无边框窗口会产生无法移动的问题。
electron无边框拖拽-按节点拖动窗口
qq_20906793的博客
03-22 1255
electron无边框拖拽-vue3自定义指令按节点拖动窗口-定时刷新窗口位置
electron 自定义窗体拖拽功能
虎康的博客
08-14 1057
在写好窗口后发现不能拖拽，这个时候就需要我们自行去设置一个拖拽功能。
快速入门electron之实现窗口拖拽
Ned的优快云博客
07-26 3230
- 对于进程通信有基本的一个了解 - 学会自定义的顶部栏如何实现拖拽功能
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
对应博客地址：https://blog.youkuaiyun.com/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码
无边框窗口加阴影
04-07
在C++Builder开发环境中，创建一个具有阴影效果的无边框窗口是一项常见的需求，这可以使应用程序看起来更加现代和专业。"无边框窗口加阴影"的主题主要涉及到Windows API的使用，以及图形设备接口（GDI）或更现代的...
electron-drag, 用于电子应用程序的窗口拖动.zip
09-18
electron-drag, 用于电子应用程序的窗口拖动 电子拖动针对 Electron 应用程序的改进窗口拖动。可以使用 -webkit-app-region css属性拖动无框架 Windows，但这禁用所有常规dom事件和用户交互，因为在应用程序中无法使用 double clicks，因
【ELECTRON】electron实现桌面鼠标拖动程序
weixin_44450506的博客
03-02 1730
把整个 html 都变成了一个可拖拽的对象。现在问题来了，在可拖拽的对象上你怎么点击啊？好的，可能你会想到把 html 中某个部分的这个属性值设置为no-drag;，那就允许该元素不可拖拽（但可以点击了）。现在让我们先把目光聚焦到“拖拽效果”上。如果是html，则整个窗口区域都可拖动，如只需要在某个区域实现拖动效果，只需更改css名即可。首先我们当然要在配置中将他自带的顶部栏禁用掉。
electron+vue3全家桶+vite项目搭建【21】自定义无边框窗口拖拽移动
个人网站：https://www.longzipeng.online
07-08 2710
electron自定义窗口拖拽移动
关于electron实现拖拽功能
m0_47538449的博客
02-21 1679
主进程设置窗口的坐标时，一定不能使用setPosition()，只设置窗口坐标，不设置大小会出现问题，当系统屏幕锁放在175%或者150%时，拖拽窗口，窗口就会无限的放大，后面我改成了setbounds限制了大小就解决了。2.但是我这边的需求是，实现整个窗口拖拽的同时里面的内容可以进行滚动，方法一不能实现，所以后面使用了鼠标监听mousedown事件，主进程main.js接受渲染进程的事件，设置窗口的坐标和大小，win是我定义好的窗口。
electron无边框模式完美解决同时实现拖动和双击最大化
热门推荐
li19931130的博客
06-06 1万+
无边框模式下，需要在background.ts启动启用：frame:false，transparent:true；配置后, 自定义导航栏这时候窗口是不可以拖动的。但是您想拖动的话，这时候您要元素中声明一个：-webkit-app-region: drag;(元素可拖动模式),但是设置以后出现了新问题drag模式下元素无法监听到鼠标双击或者单击事件。解决此问题之前看了很多文章的方法1.父元素下嵌套等宽等高的div设置-webkit-app-region: no-drag;见Electron设置-webkit-
electron 无边框拖拽
Z-VegetableBird的博客
12-25 1700
通过在创建窗口的时候，指定{frame:false}  默认情况下, 无框窗口是 non-draggable 的。 应用程序需要指定 `-webkit-app-region: drag` 在 CSS 中告诉Electron哪个区域是可拖拽的 (像 OS 的标准标题栏), 并且应用程序也可以使用 `-webkit-app-region: no-drag` 来排除 draggable region...
electron vue3 无边框拖动主窗口
01-01
### 实现无边框窗口的拖动效果 对于希望在 Electron 和 Vue3 项目中实现无边框窗口并使其可被拖拽的情况，可以通过CSS属性 `-webkit-app-region: drag` 来指定哪些区域支持拖拽操作[^1]。 为了确保整个窗口能够响应用户的拖拽动作，在HTML结构中的最外层容器或是期望作为拖拽区的部分应添加上述样式： ```html <div id="app" style="-webkit-app-region: drag;"> <!-- 应用程序的内容 --> </div> ``` 需要注意的是，任何含有输入控件（如按钮、文本框等）、滚动条或者其他交互元素的地方不应该允许拖拽行为，因为这会干扰这些组件正常的点击或滑动手势。因此，针对这类子元素应当禁用此特性： ```css input, textarea, button { -webkit-app-region: no-drag; } ``` 另外一种方法是在创建Electron窗口之后通过JavaScript来处理鼠标的移动事件从而达到相同的效果。这种方法特别适用于更复杂的场景下自定义窗口的行为逻辑。例如，可以在渲染进程中监听特定频道的消息触发窗口的位置调整函数 `windowMove(windowInstance, channelName)`[^2]。 下面是一个简单的例子展示如何利用Vue组合API模式下的setup钩子完成这一目标: ```javascript import { onMounted } from "vue"; // 假设已经引入了ipcRenderer模块用于进程间通信 import { ipcRenderer } from 'electron'; export default { setup() { const handleMouseMove = () => { // 发送消息给主进程请求改变窗口位置 ipcRenderer.send('win-move-subtitle'); }; onMounted(() => { document.getElementById("draggable-area").addEventListener("mousedown", handleMouseMove); // 清除事件监听器防止内存泄漏 return () => { document.getElementById("draggable-area").removeEventListener("mousedown", handleMouseMove); }; }); return {}; } }; ``` 在此基础上还需要配置好主进程中相应的事件处理器以接收来自渲染端的信息并对窗口执行实际的操作。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值