How do I move a frameless window in Electron without using -webkit-app-region

Question

I\'ve been trying to move a frameless window on false but now I want to move the whole window just by dragging one element (the title bar), I\'ve tried -w

Answer 1

First create your app window with the frame option set to false on your main.js file:

mainWindow = new BrowserWindow({
...
frame: false
})

Then in your renderer.js file create an HTML element (Ex. ) with the -webkit-app-region propperty set to drag.

var windowTopBar = document.createElement('div')
windowTopBar.style.width = "100%"
windowTopBar.style.height = "32px"
windowTopBar.style.backgroundColor = "#000"
windowTopBar.style.position = "absolute"
windowTopBar.style.top = windowTopBar.style.left = 0
windowTopBar.style.webkitAppRegion = "drag"
document.body.appendChild(windowTopBar)

Answer 2

Since your windows are frameless you can use the property -webkit-app-region which is valid even though your IDE says it's not. You just should forbid the text selection and drag on buttons inside of your title bar too out of UX concerns.

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

.titlebar-button {
  -webkit-app-region: no-drag;
}

The API documentation mentions this too https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#draggable-region