Draggable should compensate for transform: scale on parent element
Nobody has claimed this yet.
- 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'.
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.
The distance from the cursor and the helper element gets bigger the further down the list I go.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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