CSS 如何在Electron中移动无边框窗口而不使用-webkit-app-region

在本文中，我们将介绍如何在Electron应用程序中移动无边框窗口而不使用-webkit-app-region属性。通过一些简单的CSS和JavaScript代码，我们可以实现这个功能，使窗口可以自由拖动而不受限制。

阅读更多：CSS 教程

1. 创建无边框窗口

首先，我们需要创建一个无边框的Electron窗口。在Electron的主进程中，使用new BrowserWindow方法创建一个新窗口，并将其frame属性设置为false，以便去除窗口的边框。例如：

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

2. 使用CSS和JavaScript移动窗口

为了使无边框的窗口能够被拖动，我们需要使用一些CSS和JavaScript代码。在HTML页面中，添加一个具有特定id的元素，该元素将用于拖动窗口。例如，我们可以创建一个带有id为”drag-region”的div元素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>无边框窗口移动示例</title>
  <style>
    #drag-region {
      width: 100%;
      height: 20px;
      -webkit-app-region: drag;
      position: fixed;
      top: 0;
      left: 0;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="drag-region"></div>
  <h1>无边框窗口移动示例</h1>
  <p>这是一个示例文本。</p>
</body>
</html>

在CSS中，我们使用-webkit-app-region: drag属性为拖动区域添加拖动功能，并通过position: fixed和cursor: move属性将其固定在窗口的顶部。

接下来，我们需要在渲染进程的JavaScript代码中实现窗口拖动的功能。在preload.js文件中，添加以下代码：

const { ipcRenderer } = require('electron')

document.addEventListener('DOMContentLoaded', () => {
  const dragRegion = document.getElementById('drag-region')

  let isDragging = false
  let previousX, previousY

  dragRegion.addEventListener('mousedown', (event) => {
    isDragging = true
    const { screenX, screenY } = event
    previousX = screenX
    previousY = screenY
  })

  document.addEventListener('mousemove', (event) => {
    if (!isDragging) return

    const { screenX, screenY } = event
    const offsetX = screenX - previousX
    const offsetY = screenY - previousY
    const currentWindow = window.require('electron').remote.getCurrentWindow()
    currentWindow.setPosition(currentWindow.getPosition()[0] + offsetX, currentWindow.getPosition()[1] + offsetY)
    previousX = screenX
    previousY = screenY
  })

  document.addEventListener('mouseup', () => {
    isDragging = false
  })
})

在JavaScript代码中，我们使用ipcRenderer模块与主进程进行通信，并通过mousedown、mousemove和mouseup事件监听窗口的拖动动作。在mousedown事件中，我们记录下鼠标按下时的屏幕坐标。在mousemove事件中，我们计算鼠标在拖动过程中的偏移量，然后使用currentWindow.setPosition方法来更新窗口的位置。最后，在mouseup事件中，我们将isDragging标志设置为false，表示拖动结束。