electron 3 可拖拽区域的设置

最新推荐文章于 2025-05-15 15:41:47 发布
原创 最新推荐文章于 2025-05-15 15:41:47 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows #javascript #前端

本文介绍了如何在网页中设置可拖拽区域，通过在CSS中添加-webkit-app-region属性实现窗口的移动与放大还原功能，并说明了如何避免影响元素的点击效果。

何为可拖拽区域

像状态栏这种双击可以放大还原窗口, 单击不放可以移动窗口的, 都是可拖拽区域
在这里插入图片描述

可拖拽区域的设置

在要设置的元素的CSS中添加-webkit-app-region: drag;即可.

但元素及子元素都会失去click的效果, 这时子元素的CSS中添加 -webkit-app-region: no-drag;即可.

简单来说就是像下列的这种元素就得添加 -webkit-app-region: no-drag;这个样式.

在这里插入图片描述

第14课：Electron 应用中的拖拽操作
一个被知识诅咒的人
09-22 2434
如果应用程序需要操作外部文件，通常会使用文件打开对话框选择这个文件，然后交由程序做进一步处理，文件打开对话框会返回一个或多个选择的文件路径。不过更友好的方式是将文件拖动到程序的窗口或某一个区域上，然后同样会返回一个或多个文件给应用程序，这种行为称为拖拽操作。 本节将会通过两个案例介绍如何实现 Electron 应用的拖拽操作。 14.1 拖拽操作：拖放并显示图像 本节将通过一个简单的案例演示如何实...
electron窗口页面使用css drag拖动后，鼠标右键会弹出系统菜单，怎么让它隐藏？
豪先生的博客
08-23 1666
在background.js里面添加下面代码。background.js全部代码。
在Electron中简单实现拖拽功能
weixin_40494579的博客
11-06 4831
背景 实现简单的拖拽文件、图片到系统本地，拖拽消息体文本发送（类似于微信、QQ中的功能） 实现拖拽到本地系统，不考虑mouse实现方式，使用Electron中的startdrag配合Browser的Drag and Drop startdrag Electron API (startDrag) 提供拖拽文件到桌面系统本地的能力 使用情况比较简单，主进程监听事件，调用startdrag // main-process ipcMain.on('drag-start', (event) => { e
electron拖动
最新发布
qq_39307266的博客
05-15 275
* 启用拖动区域 */要实现拖动整个应用程序，只需要添加css。
JS实现可拖动的DIV效果并限制范围区域
01-12
利用JS实现可拖动的DIV效果，在原有基础上增加的限制在一定区域内的效果。方便，易用。可以很方便地移动到您的工程里面
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
热门推荐
WWF_HelloWorld
10-27 4万+
文章目录一、目标原型1. 目标2. 原型设计3. 原型初步实现二、无边框窗口1. 要点2. 改造三、可拖拽区1. 要点2. 改造四、最小化、最大化、关闭1. 要点2. 改造五、动态改变窗口大小1. 要点2. 改造六、实例源码下载 一、目标原型 1. 目标 实现一个无边框窗口，包括最小化、最大化、关闭、拖动等功能 动态改变窗口大小，即在页面跳转的时候根据需要改变窗口大小 2. 原型设计 (1) ...
【ELECTRON】electron实现桌面鼠标拖动程序
weixin_44450506的博客
03-02 1838
把整个 html 都变成了一个可拖拽的对象。现在问题来了，在可拖拽的对象上你怎么点击啊？好的，可能你会想到把 html 中某个部分的这个属性值设置为no-drag;，那就允许该元素不可拖拽（但可以点击了）。现在让我们先把目光聚焦到“拖拽效果”上。如果是html，则整个窗口区域都可拖动，如只需要在某个区域实现拖动效果，只需更改css名即可。首先我们当然要在配置中将他自带的顶部栏禁用掉。
electron+vue3全家桶+vite项目搭建【21】自定义无边框窗口拖拽移动
个人网站：https://www.longzipeng.online
07-08 2859
electron自定义窗口拖拽移动
在Electron内嵌的独立项目中怎么实现拖拽、最大化、最小化、关闭
10-27
在使用Electron构建桌面应用程序时，常常需要实现窗口的基本操作，如拖拽、最大化、最小化和关闭。这些功能是用户界面中不可或缺的部分，能够提供良好的用户体验。本篇文章将详细探讨如何在Electron内嵌的独立项目中...
electron 双击放大事件
顽石⚡
07-10 3800
用electron做了一款桌面应用，是无边框的，自定义的最小化、最大化等事件。首先是登陆页面，是个小窗口，登陆后窗口变大；现在有个问题是，在登陆页面，双击可以drag的起区域，就会放大。 目标是 登陆之前，禁用双击放大功能；登陆成功后启用 解决方法： 查了一些资料，electron并没有鼠标的双击事件 想到了一个解决方案 mainWindow = new BrowserWindow({ ...
electron 无边框窗口拖拽移动问题记录及解决办法
IT老大哥
06-18 3590
electron 无边框窗口拖拽移动问题记录及解决办法
electron实现拖拽后无法双击最大化
m0_63701303的博客
02-09 652
electron实现拖拽后无法双击最大化
Electron 窗口大小（拖拽或点击）切换图标
纸上得来终觉浅
07-20 2118
实战中大家可能会遇见这种情况，点击最大化还原的时候窗口图标显示正常，一旦拖拽就显示混乱 所以需要借助窗口最大化最小化，在主进程和渲染进程的通信消息来处理，记录一下 主进程代码如下 import { app, BrowserWindow, ipcMain, screen } from 'electron'; let mainWindow const winURL = process.env.NODE_ENV === 'development' ? 'http://localhos
electron ＞=14.0版本 创建子窗口，新版本创建子窗体
业余前端的职业经历
09-18 1359
看效果 其实在 14.0 版本还是发生了比较大的改动 需要你下载。@electron/remote npm i @electron/remote --save 然后在主线程 mainWindow = new BrowserWindow({ with: 300, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule:true }, });.
使用 Electron 构建桌面应用（拖动控制篇）
weixin_30725467的博客
07-26 601
当窗口被定义了大小，我们也就是在自定义这个窗口，使得它不可拉伸没有框架，让它看起来就像一个真正的声效器浮在桌面上。 现在问题来了 – 要如何移动或者关闭一个没有标题栏的窗口。 很快我就会说到自定义窗口（和应用）的关闭动作，还会谈到如何在主进程和渲染器进程中通信。不过现在让我们先把目光聚焦到“拖拽效果”上。你可以在 app/css 目录下找到 index.css 文件： html,...
Electron 无边框窗口开启全局拖拽
xionghnly的博客
08-21 4730
背景最近有个需求，Electron 打开的窗口要实现拖拽功能，大概看了一眼 BrowserWindow 的 API 却只找到了一个 move 事件，这个事件默认是针对有边框窗口的，也即...
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无边框自定义窗口拖动的问题小结
菜鸟教程
05-08 1743
到此这篇关于Electron无边框自定义窗口拖动的文章就介绍到这了,更多相关Electron自定义窗口拖动内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！教程下载地址： 网赚博客https://www.piaodoo.com/创业项目排行榜前十名https://www.piaodoo.com/茂名一技http://www.enechn.com/// 如果窗口已销毁。
【Electron-vue】创建桌面应用（14）- 自定义Electron窗口
chenqk_123的专栏
10-20 3514
1.前言 上次将项目向同事展示了一下，算是electron-vue的第一阶段调研。但是演示的时候却被各种否定，窗体比较大，而且设计不合理，布局方式不合理，等等等。由于在此之前没有做过这种客户端的形式，所以设计也是无从说起。 于是经过一番的讨论，基本上确定了要做一个类似于QQ的客户端的产品，经过一番努力，终于搞得是差不多了，成品图如下： 主要解决的问题 舍弃electron自带的窗体，自定义窗体 通过事件监听解决最小化和隐藏托盘的功能 无窗体下的拖拽功能实现 下面就开始我们的代码之旅。 2. 修改窗
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 &#39;electron&#39;; export default { setup() { const handleMouseMove = () => { // 发送消息给主进程请求改变窗口位置 ipcRenderer.send(&#39;win-move-subtitle&#39;); }; onMounted(() => { document.getElementById("draggable-area").addEventListener("mousedown", handleMouseMove); // 清除事件监听器防止内存泄漏 return () => { document.getElementById("draggable-area").removeEventListener("mousedown", handleMouseMove); }; }); return {}; } }; ``` 在此基础上还需要配置好主进程中相应的事件处理器以接收来自渲染端的信息并对窗口执行实际的操作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值