You may have already noticed that you cannot drag the application window as soon as it becomes frameless. That is the default behavior of Electron windows, but you can easily change it by applying the -webkit-app-region: drag style to the body element of the HTML document:
<body style="-webkit-app-region: drag">
</body>
Note, however, that once you apply the -webkit-app-region: drag style, the whole application area becomes draggable, including all the buttons and input elements on the page. You can whitelist certain areas or HTML elements by utilizing the -webkit-app-region: no-drag; CSS value. In this case, the marked element is excluded from the drag feature.
Let's whitelist all the buttons from the dragging area so that the users of our application can click them:
- Update the App.css file and add the button rule...