Change drag-region to data attribute

[lucasfernog]

Currently the draggable region is marked with a class (drag-region) but we've been discussing on Discord about changing to be a data attribute instead.

[jecsham]

@lucasfernog
This sometimes doesn't work properly due to overlaped layers

Working

        <div  data-tauri-drag-region className="title-panel">
          
        </div>

Not working

        <div  data-tauri-drag-region className="title-panel">
          <div className="uk-text-small uk-text-muted p-n">
            <p id="text-title">
                App Title
            </p>
          </div>
        </div>

[lucasfernog]

Hey @jecsham can you file an issue so we don't forget about this?

[jecsham]

Hey @jecsham can you file an issue so we don't forget about this?

Sure, I will prepare one

[FabianLars]

No need for a new issue. We already tried fixing it, but it's actually not possible without breaking stuff. So instead you always need to add the attribute to the actual click target(s) (most of the time it's the innermost element(s).

ref: #3031

[betamos]

I tried using this attribute, but gave up after playing whack-a-mole with adding data-tauri-drag-region to every non-interactive element and it's children. If you have a fixed draggable region, this is... managable. But if you (like me) want everything non-interactive to be draggable, it's not maintainable.

Tried a few options until I found something that works fantastic for me:

import { window as tauriWindow } from "@tauri-apps/api";
// ...
const noDragSelector = "input, a, button"; // CSS selector
document.addEventListener("mousedown", async e => {
    if (e.target.closest(noDragSelector)) return; // a non-draggable element either in target or its ancestors
    await tauriWindow.appWindow.startDragging();
});

This solution technically has the opposite issue - playing whack-a-mole with interactive elements, but, this is a much easier task in practice. I can't speak for all apps, but it may be worth considering for Tauri. For instance, we could make use of the (currently unused) attribute value to provide the above mentioned behavior:

<div data-tauri-drag-region> works exactly like it does today </div>
<div data-tauri-drag-region="input, a, textarea"> custom no-drag selector </div>
<div data-tauri-drag-region="default"> some sensible default no-drag-selector </div>

[mokeyish]

@lucasfernog This sometimes doesn't work properly due to overlaped layers

Working

        <div  data-tauri-drag-region className="title-panel">
          
        </div>

Not working

        <div  data-tauri-drag-region className="title-panel">
          <div className="uk-text-small uk-text-muted p-n">
            <p id="text-title">
                App Title
            </p>
          </div>
        </div>

Hi, have your solved this problem?

[jecsham]

@lucasfernog
Hi, have your solved this problem?

As a quick fix you could put the data-tauri-drag-region in the parent and all its children, like:

<div data-tauri-drag-region className="title-panel">
    <div data-tauri-drag-region  className="uk-text-small uk-text-muted p-n">
        <p data-tauri-drag-region  id="text-title">App Title</p>
  </div>
</div>

[mokeyish]

@lucasfernog
Hi, have your solved this problem?

As a quick fix you could put the data-tauri-drag-region in the parent and all its children, like:

<div data-tauri-drag-region className="title-panel">
    <div data-tauri-drag-region  className="uk-text-small uk-text-muted p-n">
        <p data-tauri-drag-region  id="text-title">App Title</p>
  </div>
</div>

thanks

[Sewdohe]

Using Angular, placing data-tauri-drag-region on a DOM element has no effect for dragging. Any solution?

Didn't the drag region used to be a CSS class?

[FabianLars]

@Sewdohe

1. Make sure to enable the startDragging api in the window allowlist
2. The data attribute must be applied to the actual click target (most of the times the innermost element). You can find it by having a document-wide click event listener and checking it's target element when you click on your drag region. If you want to change the behavior you can use the startDragging function directly, similar to how we do it behind the scenes: https://github.com/tauri-apps/tauri/blob/dev/core/tauri/scripts/core.js#L135-152

[fayez-nazzal]

@Sewdohe

1. Make sure to enable the startDragging api in the window allowlist
2. The data attribute must be applied to the actual click target (most of the times the innermost element). You can find it by having a document-wide click event listener and checking it's target element when you click on your drag region. If you want to change the behavior you can use the startDragging function directly, similar to how we do it behind the scenes: https://github.com/tauri-apps/tauri/blob/dev/core/tauri/scripts/core.js#L135-152

Enabling startDragging made it work for me, thanks!