Necesito crear una aplicación usando el marco electron.js, crear una ventana que se pueda mover arrastrando y soltando, y también se debe llamar a un método cuando se hace clic
al hacer clic en mi ventana, el evento no funciona. el caso es que en estilos, para que mi ventana se pueda mover, uso lo siguiente:
html { -webkit-app-region: drag; }funciona correctamente en MacOS. Por alguna razón, en Windows sucede que el diseño cambia. Es debido a este estilo que el evento de clic no funciona.
Adjunto capturas de pantalla para mayor claridad: Con estilos Sin estilos
¿Cómo se puede eludir este problema? ¿Quizás hay otra forma de forzar el movimiento de la ventana que no impida que el evento funcione correctamente?
Estaré agradecido por su ayuda!
Código HTML:
<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; } }guión.js
let duck = document.getElementById('duck') duck.addEventListener('click', () => { audio.play(); })índice.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')); };Al final, quiero esta ventana simple, con fondo transparente, que el usuario puede arrastrar en la pantalla del escritorio y cuando el usuario haga clic en la imagen, el pato emitirá un sonido. Captura de pantalla de mi aplicación
