Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draggable should compensate for transform: scale on parent element #2261

Open
Niels-NTG opened this issue Jun 6, 2024 · 1 comment
Open

Comments

@Niels-NTG
Copy link

Niels-NTG commented Jun 6, 2024

Hello,

For our webapp has a feature which allows the user to "present" their content for a big screen. For this we apply this CSS

.container {
    --scale-factor: 1;

    @media (min-width: 1440px) {
        --scale-factor: 1.1;
    }

    @media (min-width: 1920px) {
        --scale-factor: 1.4;
    }

    @media (min-width: 2560px) {
        --scale-factor: 1.9;
    }

    @media (min-width: 3840px) {
        --scale-factor: 2.1;
    }

   .content {
       transform: scale(var(--scale-factor));
   }
}

Any instance of draggable, sortable and droppable that is a direct or indirect child of .content doesn't look quite right if --scale-factor is not equal to 1. When dropping items in the sortable it drops the dragged item at the expected position, but the position of the "helper" element does not stay attached to the cursor's position. See images below:

The draggable. Items have containment on the direct parent element and I use helper: 'original'.
Scherm­afbeelding 2024-06-06 om 14 52 21 (2)

When starting to drag the first item, the top attribute of the helper is multiplied by the scaling of a parent element, resulting in the helper item (in red) being offset from my cursor.
Scherm­afbeelding 2024-06-06 om 14 50 30 (2)
The distance from the cursor and the helper element gets bigger the further down the list I go.
Scherm­afbeelding 2024-06-06 om 14 57 00 (2)

The discrepancy between jQuery UI being able to figure out the correct position of the drop target but not the position of the helper suggests to me there is a bug in how the translation of the helper is calculated. Maybe this can be fixed or an option can be added to the API for scale, so jQueryUI can adjust the positioning of the helper accordingly.

Observed with:

  • jQueryUI version 1.13.2 and 1.13.3
  • Chrome v125 and macOS Safari 17.5
@mgol
Copy link
Member

mgol commented Jun 11, 2024

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.

I suspect issues like that would be too big to fix at this stage of the project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants