电子标题栏为“禁止拖动".和“拖曳"不工作 [英] Electron title bar "no-drag" and "drag" not working

问题描述

我有一个 #topleft 红色标题栏，其中包含多个标签"按钮应填充所有可用空间 一个 #topright 蓝色块.
通过单击并拖动 #topleft 的红色背景，可以移动电子主窗口，这要归功于 -webkit-app-region:drag; .这行得通.

I have a #topleft red title bar containing multiple "tab" buttons that should fill all the available space except a #topright blue block.
It is possible to move the main Electron window by click-and-dragging on #topleft's red background, thanks to -webkit-app-region: drag;. This works.

问题:

1. 对 #topright 的点击将被忽略: alert()未触发(此块的子元素存在相同的问题)
2. #topright span:hover {background-color:black;} 被忽略
3. #topright {-webkit-app-region:不拖动；} 被忽略:我们仍然可以通过在 #topright 上单击并拖动来移动窗口，但不应这样做

1. clicks on #topright are ignored: alert() is not triggered (same problem for child elements of this block)
2. #topright span:hover { background-color: black; } is ignored
3. #topright { -webkit-app-region: no-drag; } is ignored: we can still move the window by click-and-dragging on #topright whereas it should not

但是，如果我们在浏览器中运行相同的HTML代码 ，则一切正常.

However if we run the same HTML code in a browser, all is working correctly.

如何在Electron中解决此问题?

for (var i = 0; i < 50; i++)
document.getElementById("topleft").innerHTML += "<button>xyz" + i + "</button>";

* { margin: 0; }
#topright { float: right; width: 100px; background-color: blue; -webkit-app-region: no-drag; }
#topright:hover { background-color: black; }
#topleft { background-color: red; -webkit-app-region: drag; padding: 10px; }

<div id="topright" onclick="alert();">Click here!</div>
<div id="topleft"></div>

注意:

• 我已经看过我已经看过无框窗口带有电子控件(Windows)，但此处无济于事.

链接了问题

推荐答案

我对Electron不熟悉，但是您可以尝试将浮动的蓝色元素移到红色元素中.

I'm not familiar with Electron but you could try moving the floated blue element within the red element.

const max = 50;
let   i   = 0;

for ( ; i < max; i++ ) {
  document.getElementById( 'topleft' ).innerHTML += `<button>xyz${ i }</button>`;
}

* {
  margin: 0;
}

#topleft {
  background-color: red;
  -webkit-app-region: drag;
  padding: 10px;
}

#topright {
  float: right;
  margin: -10px -10px 0 0;
  width: 100px;
  background-color: blue;
  -webkit-app-region: no-drag;
}

#topright:hover {
  background-color: black;
}

<div id="topleft">
  <div id="topright" onclick="alert();">Click here!</div>
</div>

注意:我添加了一些负边距，以使蓝色元素与红色元素的边缘对接(由于填充，VS处于红色元素内部).

Note: I added some negative margins so that the blue element would butt up against the edges of the red element (vs being inside the red element because of padding).

使用绝对定位和克隆"的原始答案元素.由于新信息，更新了答案.

Original Answer using absolute positioning and a "cloned" element. Updated answer due to new information.

这篇关于电子标题栏为“禁止拖动".和“拖曳"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！