jquery / jquery/jquery-ui

Draggable should compensate for transform: scale on parent element

Open
#2,261 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Draggable
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Reproduce the helper-position drift with draggable, sortable, or droppable inside a transformed parent, using containment and helper: 'original' at a scale other than 1; done means the helper remains attached to the cursor while drop positioning continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.