Electronドラッグウィンドウの実装方法


const { BrowserWindow } = require('electron');
function createWindow() {
  const mainWindow = new BrowserWindow({
    frame: false, // フレームを非表示にする
    draggable: true // ドラッグ可能にする
  });
  mainWindow.loadURL('index.html');
}
app.whenReady().then(createWindow);
  1. マウスイベントを使用してウィンドウをドラッグする: ウィンドウをドラッグするために、マウスのイベントを監視する必要があります。以下に、マウスの「mousedown」、「mousemove」、および「mouseup」イベントを使用する例を示します。
let isDragging = false;
let prevPosition = { x: 0, y: 0 };
document.addEventListener('mousedown', (event) => {
  isDragging = true;
  prevPosition = { x: event.clientX, y: event.clientY };
});
document.addEventListener('mousemove', (event) => {
  if (isDragging) {
    const { x, y } = remote.getCurrentWindow().getPosition();
    const newPosition = { x: x + event.clientX - prevPosition.x, y: y + event.clientY - prevPosition.y };
    remote.getCurrentWindow().setPosition(newPosition.x, newPosition.y);
    prevPosition = { x: event.clientX, y: event.clientY };
  }
});
document.addEventListener('mouseup', () => {
  isDragging = false;
});

上記のコード例では、マウスイベントを使用してウィンドウの位置を更新しています。

これらの手順とコード例を使用することで、Electronアプリケーションでドラッグ可能なウィンドウを実装することができます。この方法を利用して、ユーザーがウィンドウをドラッグして移動できるようになります。