const { BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
frame: false, // フレームを非表示にする
draggable: true // ドラッグ可能にする
});
mainWindow.loadURL('index.html');
}
app.whenReady().then(createWindow);
- マウスイベントを使用してウィンドウをドラッグする: ウィンドウをドラッグするために、マウスのイベントを監視する必要があります。以下に、マウスの「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アプリケーションでドラッグ可能なウィンドウを実装することができます。この方法を利用して、ユーザーがウィンドウをドラッグして移動できるようになります。