ウィンドウをドラッグできる領域を指定する

カスタムタイトルバーなどを作成する際に、ウィンドウそのものをドラッグ移動できる領域を指定する方法を解説します。
Tauri では、JavaScript を使わずに HTML/CSS の属性だけで簡単に設定できます。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
  "permissions": [
    ...,
    "core:window:allow-start-dragging"
  ]
}

実装方法

HTML 要素に data-tauri-drag-region 属性を付与します。

<header data-tauri-drag-region class="titlebar">
  <!-- タイトルテキストなどはドラッグ可能になる -->
  <h1>My App</h1>
  
  <!-- ボタンなどでドラッグを無効化したい場合は属性を付けない -->
  <button onClick={minimize}>-</button>
  <button onClick={close}>x</button>
</header>

.titlebar {
  height: 30px;
  background: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none; /* テキスト選択を防ぐのが一般的 */
}

この属性が付いた要素上でマウスボタンを押下して動かすと、OS ネイティブのウィンドウ移動がトリガーされます。
JavaScript のイベントリスナーで window.startDragging を呼ぶ方法もありますが、この属性ベースの方法が最もパフォーマンスが良く、バグも少ないため推奨されます。