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

问题

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 -webkit-app-region: drag; but it doesn't seem to work, I've also tried https://www.npmjs.com/package/electron-drag but it does't work either.

回答1:

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

回答2:

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)

来源：https://stackoverflow.com/questions/44818508/how-do-i-move-a-frameless-window-in-electron-without-using-webkit-app-region

标签

javascript

css

node.js

reactjs

electron