Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 984
speed437 Avatar asked Jun 29 '17 07:06

speed437


People also ask

How do you drag a frameless window in an electron?

Draggable region​ By default, the frameless window is non-draggable. Apps need to specify -webkit-app-region: drag in CSS to tell Electron which regions are draggable (like the OS's standard titlebar), and apps can also use -webkit-app-region: no-drag to exclude the non-draggable area from the draggable region.


3 Answers

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

like image 196
Hans Koch Avatar answered Oct 07 '22 16:10

Hans Koch


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)
like image 16
Pelayo Méndez Avatar answered Oct 07 '22 14:10

Pelayo Méndez


I had the same problem and after opening the Developer Tools Window (Ctrl+Shift+I) I noticed that inline code was being blocked by a Content Security Policy.

The solution was to move css into an external file

index.html

<link rel="stylesheet" type="text/css" href="style.css"/>

style.css

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

now anything with the draggable class is draggable and prevents the text from being selected

like image 1
Josh McGee Avatar answered Oct 07 '22 16:10

Josh McGee