Tauri2でウィンドウを透過してドラッグできるようにするには?
- 作成日: 2025-08-16
- 更新日: 2025-08-16
- カテゴリ: Tauri2
- タグ: Tauri2, GUI
ウィンドウを透過するにはウィンドウの装飾などをオフにして透過指定を入れます。
tauri.conf.jsonのapp -> windowsを以下のように編集。
"app": {
"windows": [
{
"title": "myApp",
"width": 400,
"height": 400,
"decorations": false,
"transparent": true,
"shadow": false,
"fullscreen": false,
"resizable": false,
"maximizable": false
}
],
}
HTML内の要素をドラッグできるようにするにはsrc-tauri/capabilities/default.jsonを以下のように編集。
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default",
"description": "Capability for the main window",
"windows": ["main"],
"permissions": [
"core:default",
"core:window:default",
"core:window:allow-start-dragging"
]
}
そしてHTML内の要素にdata-tauri-drag-regionを書きます。以下は表示している画像をドラッグしてウィンドウを動かせるようにする例。
<img data-tauri-drag-region :src="imgSrc">