tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
85.38k stars 2.58k forks source link

[bug] Setting "dragDropEnabled": true, has no effect #11771

Closed RainyNight9 closed 7 hours ago

RainyNight9 commented 14 hours ago

Describe the bug

Setting "dragDropEnabled": true, has no effect。

I want my window to be able to be dragged anywhere on the desktop。

src-tauri/tauri.conf.json

"app": {
    "macOSPrivateApi": true,
    "windows": [
      {
        "acceptFirstMouse": true,
        "alwaysOnBottom": false,
        "alwaysOnTop": false,
        "center": false,
        "closable": true,
        "contentProtected": false,
        "create": true,
        "decorations": false,
        "dragDropEnabled": true,
        "focus": true,
        "fullscreen": false,
        "height": 90,
        "maxHeight": 700,
        "minHeight": 90,
        "width": 680,
        "maxWidth": 680,
        "minWidth": 680,
        "hiddenTitle": false,
        "incognito": false,
        "label": "main",
        "maximizable": false,
        "minimizable": true,
        "maximized": false,
        "proxyUrl": "http://localhost:2900",
        "resizable": false,
        "shadow": true,
        "skipTaskbar": false,
        "theme": null,
        "title": "AI",
        "transparent": true,
        "url": "/ui",
        "visible": true,
        "visibleOnAllWorkspaces": true,
        "windowEffects": {
          "effects": [],
          "radius": 20
        },
        "x": null,
        "y": null,
        "zoomHotkeysEnabled": false
      }
    ],
    "security": {
      "csp": null
    }
  },

src-tauri/capabilities/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main", "chat"],
  "permissions": [
    "core:default",
    "core:event:allow-emit",
    "core:event:allow-listen",
    "core:webview:allow-create-webview",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-get-all-webviews",
    "core:webview:allow-webview-close",
    "core:webview:allow-webview-hide",
    "core:webview:allow-webview-show",
    "core:webview:allow-webview-size",
    "core:webview:allow-set-webview-size",
    "core:webview:allow-set-webview-zoom",
    "core:window:default",
    "core:window:allow-center",
    "core:window:allow-close",
    "core:window:allow-hide",
    "core:window:allow-show",
    "core:window:allow-create",
    "core:window:allow-destroy",
    "core:window:allow-start-dragging",
    "core:window:allow-set-size",
    "core:window:allow-get-all-windows",
    "core:app:allow-set-app-theme",
    "shell:allow-open",
    "http:default",
    "http:allow-fetch",
    "http:allow-fetch-cancel",
    "http:allow-fetch-read-body",
    "http:allow-fetch-send",
    "websocket:default",
    "websocket:allow-connect",
    "websocket:allow-send",
    {
      "identifier": "http:default",
      "allow": [
        {
          "url": "http://localhost:2900"
        }
      ],
      "deny": []
    }
  ]
}

Reproduction

No response

Expected behavior

No response

Full tauri info output

[✔] Environment
    - OS: Mac OS 14.5.0 x86_64 (X64)
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.82.0 (f6e511eec 2024-10-15)
    ✔ cargo: 1.82.0 (8f40fc59f 2024-08-21)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-apple-darwin (default)
    - node: 20.12.2
    - pnpm: 9.3.0
    - yarn: 1.22.22
    - npm: 8.19.4

[-] Packages
    - tauri 🦀: 2.0.5
    - tauri-build 🦀: 2.0.1
    - wry 🦀: 0.46.3
    - tao 🦀: 0.30.3
    - @tauri-apps/api : 2.0.2 (outdated, latest: 2.1.1)
    - @tauri-apps/cli : 2.0.3 (outdated, latest: 2.1.0)

[-] Plugins
    - tauri-plugin-fs 🦀: 2.0.3
    - @tauri-apps/plugin-fs : not installed!
    - tauri-plugin-http 🦀: 2.0.3
    - @tauri-apps/plugin-http : 2.0.1
    - tauri-plugin-websocket 🦀: 2.0.1
    - @tauri-apps/plugin-websocket : 2.0.0
    - tauri-plugin-shell 🦀: 2.0.1
    - @tauri-apps/plugin-shell : 2.0.0 (outdated, latest: 2.0.1)

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: React
    - bundler: Vite

Stack trace

No response

Additional context

No response

RainyNight9 commented 14 hours ago

And added data-tauri-drag-region。

If you set "decorations":true, you can drag it, but I don't want to set decorations

Or what are the requirements for the div page element after setting data-tauri-drag-region? Can't use absolute?

import { useState } from "react";

const TransitionComponent = () => {
  const [isTransitioned, setIsTransitioned] = useState(false);

  const handleToggle = () => {
    setIsTransitioned(!isTransitioned);
  };

  return (
    <div
      data-tauri-drag-region
      className="w-[680px] h-[600px] mx-auto bg-gray-100 overflow-hidden relative"
    >
      <div
        className={`absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
          isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
        }`}
      >
        <button
          className="px-4 py-2 bg-white text-black rounded"
          onClick={handleToggle}
        >
          Toggle
        </button>
      </div>

      <div
        className={`absolute w-full bg-green-500 transition-opacity duration-500 ${
          isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
        } bottom-0 h-[500px]`}
      ></div>

      <div
        className={`absolute w-full bg-yellow-500 transition-all duration-500 ${
          isTransitioned
            ? "top-0 opacity-100 pointer-events-auto"
            : "-top-[510px] opacity-0 pointer-events-none"
        } h-[500px]`}
      ></div>
    </div>
  );
};

export default TransitionComponent;