electron 拖拽

在 Electron 中实现拖拽功能，可以通过在渲染进程中监听鼠标事件来实现。具体步骤如下：

1. 在 HTML 文件中添加拖拽区域，例如：

<div id="drag-area">拖拽区域</div>

2. 在渲染进程中获取拖拽区域的 DOM 元素，并添加鼠标事件监听：

const dragArea = document.getElementById('drag-area');

dragArea.addEventListener('mousedown', (event) => {
  // 记录鼠标按下时的坐标
  const startX = event.clientX;
  const startY = event.clientY;

  // 添加鼠标移动事件监听
  document.addEventListener('mousemove', onMouseMove);

  // 添加鼠标松开事件监听
  document.addEventListener('mouseup', onMouseUp);

  // 阻止默认事件和冒泡
  event.preventDefault();
  event.stopPropagation();

  function onMouseMove(event) {
    // 计算鼠标移动的距离
    const deltaX = event.clientX - startX;
    const deltaY = event.clientY - startY;

    // 设置窗口位置
    const currentWindow = remote.getCurrentWindow();
    const currentPosition = currentWindow.getPosition();
    currentWindow.setPosition(currentPosition[0] + deltaX, currentPosition[1] + deltaY);

    // 阻止默认事件和冒泡
    event.preventDefault();
    event.stopPropagation();
  }

  function onMouseUp(event) {
    // 移除鼠标移动事件监听
    document.removeEventListener('mousemove', onMouseMove);

    // 移除鼠标松开事件监听
    document.removeEventListener('mouseup', onMouseUp);

    // 阻止默认事件和冒泡
    event.preventDefault();
    event.stopPropagation();
  }
});

在上述代码中，我们通过监听 `mousedown` 事件来启动拖拽操作，记录鼠标按下时的坐标，并添加 `mousemove` 和 `mouseup` 事件监听。在 `mousemove` 事件处理函数中，计算鼠标移动的距离，并通过 `remote` 模块获取当前窗口对象，设置窗口位置。在 `mouseup` 事件处理函数中，移除事件监听。