Строка заголовка Electron «без перетаскивания» и «перетаскивание» не работает
У меня есть #topleft красная строка заголовка, содержащая несколько кнопок «вкладки», которые должны заполнять все доступное пространство, кроме #topright синего блока. Благодаря #topleft можно переместить главное окно Electron, щелкнув и перетащив красный фон -webkit-app-region: drag;. Это работает.
Проблемы:
- клики по
#toprightигнорируются:alert()не срабатывает (такая же проблема для дочерних элементов этого блока) #topright span:hover { background-color: black; }игнорируется#topright { -webkit-app-region: no-drag; }игнорируется: мы все еще можем перемещать окно, щелкая и перетаскивая#topright, тогда как это не должно
Однако если мы запустим тот же HTML-код в браузере, все будет работать правильно.
Как это решить в Электроне?
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) но тут не поможет.
Связанный выпуск
Ответы 2
Я не знаком с Electron, но вы можете попробовать переместить плавающий синий элемент внутри красного элемента.
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>Примечание. Я добавил несколько отрицательных полей, чтобы синий элемент упирался в края красного элемента (а не находился внутри красного элемента из-за отступов).
Оригинальный ответ с использованием абсолютного позиционирования и «клонированного» элемента. Обновленный ответ в связи с новой информацией.
На самом деле есть очень простое решение: просто переместите плавающий div внутрь #topleft:
<div id = "topleft">
<div id = "topright" onclick = "alert();">Click here!</div>
</div>
Спасибо за обновление @hungerstar! Пожалуйста, добавьте свое предыдущее решение в конце вопроса или просто ссылку на предыдущее редактирование, это может быть полезно для дальнейшего использования :)