chore(examples): update custom_titlbar example with app-region: drag (

#1277)
tauri-apps · May 23, 2024 · 50ec050 · 50ec050
1 parent f089964
commit 50ec050
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/examples/custom_titlebar.rs b/examples/custom_titlebar.rs
@@ -126,6 +126,10 @@ fn main() -> wry::Result<()> {
               box-sizing: border-box;
           }
 
+          *[data-wry-darg-region] {
+            app-region: drag; /* Supported on Windows only, on WebView2 123+ and makes dragging with touch work */
+          }
+
           main {
             display: grid;
             place-items: center;
@@ -168,7 +172,7 @@ fn main() -> wry::Result<()> {
 
   <body>
       <div class="titlebar">
-          <div class="drag-region">Custom Titlebar</div>
+          <div data-wry-darg-region>Custom Titlebar</div>
           <div>
               <div class="titlebar-button" onclick="window.ipc.postMessage('minimize')">
                   <img src="https://api.iconify.design/codicon:chrome-minimize.svg" />
@@ -187,7 +191,7 @@ fn main() -> wry::Result<()> {
       <script>
           document.addEventListener('mousemove', (e) => window.ipc.postMessage(`mousemove:${e.clientX},${e.clientY}`))
           document.addEventListener('mousedown', (e) => {
-              if (e.target.classList.contains('drag-region') && e.buttons === 1) {
+              if (e.target.hasAttribute('data-wry-darg-region') && e.button === 0) {
                   e.detail === 2
                       ? window.ipc.postMessage('maximize')
                       : window.ipc.postMessage('drag_window');
@@ -196,7 +200,7 @@ fn main() -> wry::Result<()> {
               }
           })
           document.addEventListener('touchstart', (e) => {
-              if (e.target.classList.contains('drag-region')) {
+              if (e.target.hasAttribute('data-wry-darg-region')) {
                   window.ipc.postMessage('drag_window');
               }
           })