I need to create an application using the electron.js framework, create a window that can be moved by drag-and-drop, and also a method should be called when clicked
when clicking on my window, the event does not work. the fact is that in styles, in order for my window to be able to move, I use the following:
html {
-webkit-app-region: drag;
}
works correctly on MacOS. For some reason, it happens in Windows that the layout shifts. It is because of this style that the click event does not work.
I'm attaching screenshots for clarity: With styles Without styles
How can this problem be bypassed? Perhaps there is another way to force the window to move that won't prevent the event from working correctly?
I will be grateful for your help!
HTML code:
<body>
<div id="wrapper">
<img id="duck" src="assets/ducks/duck.png">
<audio id="krik" preload="auto" src="assets/krik.mp3"></audio>
<div id="callout">Hello!</div>
</div>
</body>
CSS:
html {
-webkit-app-region: drag;
}
*{
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#duck {
position: relative;
height: 9.5rem;
transition: all ease-in-out;
transition-duration: 1s;
animation: rubber-ducky infinite linear;
animation-duration: 10s;
}
}
script.js
let duck = document.getElementById('duck')
duck.addEventListener('click', () => {
audio.play();
})
index.js
const createDuckWindow = () => {
duckWindow = new BrowserWindow({
frame: 0,
hasShadow: false,
transparent: true,
backgroundColor: "rgba(255,0,0,0)",
autoHideMenuBar: true,
resizable: false, //set false
width: 300, //300
height: 200,
x: 0,
y: 0,
minimizable: false,
webPreferences: {
backgroundThrottling: false,
nodeIntegration: true,
contextIsolation: false
}
})
duckWindow.setAlwaysOnTop(true, "screen-saver");
duckWindow.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true});
duckWindow.loadFile(path.join(__dirname, 'index.html'));
};
In the end, I want this simple window, with transparent background, which user can drag on desktop screen and when user click on picture, the duck will be make some sound. My application screenshot
