Drag a window with resizable set to false

[elanzini]

For my use case, I have a window with the following tauri configs.

"windows": [
      {
        "fullscreen": false,
        "height": 305,
        "resizable": false,
        "title": "Rake",
        "width": 425,
        "decorations": false,
        "transparent": true
      }
    ]

I have looked at this: #2708 but the difference is that I want to keep resizable set to false.
I would like to be able to drag the window around but I am unable to do so. Is this possible?

[w-henderson]

You could do this by adding the data-tauri-drag-region attribute to part of the HTML in your front-end code, like this:

<div data-tauri-drag-region>
    Dragging this <code>div</code> will drag the window.
</div>

Otherwise, without decorations, there aren't any areas of the window that are by default draggable.

[boan-anbo]

Thanks for the example! What about non-div elements such as <svg> or library tags, such as <fa-icon> for font-awesome? I was hoping to add an icon with a drag icon that allows dragging the window.

[FabianLars]

@boan-anbo Don't they support additional attributes?

You can also add the attribute from js if you don't have access to the html tags ahead of time.

If both don't work you can implement it in js by copying how the attribute works behind the scenese, see here https://github.com/tauri-apps/tauri/blob/dev/core/tauri/scripts/core.js#L135-L152

[boan-anbo]

Thanks so much for the reference! Yeah, the two kinds of tag I listed doesn't work currently with Angular. I'm using Unicode characters in divs as icons for now to use the div attribute.