kevinlinv/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <style>
      * { margin: 0px; padding: 0px; }
    </style>
  </head>
  <body>
    <h2>This is the content of the window - try to drag the bottom part of the window</h2>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
const {app, BrowserView, BrowserWindow} = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadFile('index.html')

  const browserView = new BrowserView();
  browserView.setBackgroundColor('#000000');
  browserView.setAutoResize({
    width: true,
    height: true,
    horizontal: false,
    vertical: false,
  });

  const { width, height } = mainWindow.getContentBounds();
  const windowContentHeight = 40;
  mainWindow.setBrowserView(browserView);
  browserView.setBounds({
    x: 0,
    // Setting the y point on the bounds causes the same amount of px
    // being draggable at the bottom of the view
    y: windowContentHeight,
    width,
    height: height - windowContentHeight,
  });
}

app.whenReady().then(createWindow)

app.on('window-all-closed', app.quit)

## package.json
{
  "name": "browser view draggable",
  "productName": "browser view draggable",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "10.1.6"
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	<style>
	* { margin: 0px; padding: 0px; }
	</style>
	</head>
	<body>
	<h2>This is the content of the window - try to drag the bottom part of the window</h2>
	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	const {app, BrowserView, BrowserWindow} = require('electron')

	function createWindow () {
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	})
	mainWindow.loadFile('index.html')

	const browserView = new BrowserView();
	browserView.setBackgroundColor('#000000');
	browserView.setAutoResize({
	width: true,
	height: true,
	horizontal: false,
	vertical: false,
	});

	const { width, height } = mainWindow.getContentBounds();
	const windowContentHeight = 40;
	mainWindow.setBrowserView(browserView);
	browserView.setBounds({
	x: 0,
	// Setting the y point on the bounds causes the same amount of px
	// being draggable at the bottom of the view
	y: windowContentHeight,
	width,
	height: height - windowContentHeight,
	});
	}

	app.whenReady().then(createWindow)

	app.on('window-all-closed', app.quit)
	{
	"name": "browser view draggable",
	"productName": "browser view draggable",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "10.1.6"
	}
	}