#6844 closed feature (wontfix)
Draggable: support CSS tranforms
| Reported by: | maciel310 | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 2.0.0 |
| Component: | ui.draggable | Version: | 1.8.7 |
| Keywords: | trasform scale rotate | Cc: | |
| Blocked by: | Blocking: |
Description
It looks like work needs to be done in jQuery UI to support dragging rotated elements. Right now it is pretty finicky when moving elements around, as things such as the container boundaries aren't properly respected, when clicking on the element and moving it jumps to a different snapping point (instead of the appropriate behavior of centering around the mouse), etc. I'd imagine it has something to do with not getting the correct height, width, x, and y values from the browser. Not sure how easy this would be to get working (might the issue be in the browser itself?), and depending on the actual issue it might be a bit hairy to get working due to odd rotation amounts (non-90 degree increments), but a fix would be great.
Here is a test case on jsFiddle: http://jsfiddle.net/fa2x3/ . I've tested this on all of the versions of jQuery & jQueryUI available on jsfiddle, and all behave the exact same way. I've tested this on both FireFox and Chrome, and IE is obviously ruled out of this one due to the requirement of rotation (not sure about IE9). Running Windows 7. All browsers and versions tested seem to behave the exact same way.
I tried a couple potential workarounds, such as adding an element which wraps around the original element which is the draggable, and rotating the inner element, but this didn't work and caused rendering issues. I'm open to other suggested workarounds if anyone's run in to this sort of thing before.
Change History (43)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
Hello I'm another person looking for workaround for that issue.
I think that it's the browser's limitation as CSS transforms our object into a 2D canvas while original DIV stays hidden with original sizes (width/height/left/top). If we Inspect our rotated object in Firebug there is a hidden layer which look exactly the same like before/without CSS transform.
I'm sure that CSS transform is not the right solution, not saying that it's not supported by older browsers.
P.S. In my case I need to rotate a DIV on keyboard event while it's being dragged...
comment:6 Changed 12 years ago by
Here is a clear demonstration of the problem when the element is scaled. Occurs in webkit, including Chrome 12, but performs as expected in Firefox.
comment:7 Changed 12 years ago by
| Keywords: | trasform scale rotate added |
|---|---|
| Summary: | Draggable issues when Element is rotated → Draggable issues when Element is transformed |
comment:8 Changed 12 years ago by
Related forum thread http://forum.jquery.com/topic/draggable-css-transform-scale-2
comment:13 Changed 11 years ago by
Why have not fixed? 18 month (yet another example http://jsfiddle.net/bLKQj/12/)
comment:14 Changed 10 years ago by
| Milestone: | 1.9.0 → 2.0.0 |
|---|
comment:16 Changed 10 years ago by
| Status: | new → open |
|---|---|
| Summary: | Draggable issues when Element is transformed → Draggable: support CSS tranforms |
| Type: | bug → feature |
This might be opening a can of worms, but it certainly has enough dupes to start thinking about tackling. Let's discuss in the meeting next week.
comment:18 Changed 10 years ago by
| Resolution: | → wontfix |
|---|---|
| Status: | open → closed |
We discussed this at the meeting, and CSS transforms are not something we plan on supporting anytime in the predictable feature, so closing this as wontfix.
comment:25 Changed 10 years ago by
Have solucioned the problem!
If capture $(foo).offset().left when set css scale the value is not equals to real position if use transform-origin: top left;
To fix this replace $(foo).offset().left by parseInt($(foo).css('left').replace('px',)) but need set position after run: foo{ top: 0; left: 0; position: absolute; }
:)
The problem is who detect transform-origin and diference of positions when apply an scale(). Calculate by %?
comment:27 Changed 10 years ago by
Here is my solution for this, work only if transform is applied on draggable element, not parent
comment:31 Changed 9 years ago by
Even Internet Explorer supports CSS transformations. I can't believe JQuery won't.
comment:37 Changed 8 years ago by
I devised a simple plan to go and change the zoom level of the items when beginning the start of the drag, but this does not seem to correctly work.
See the JSFiddle and try moving the blocks around to see the issue: http://jsfiddle.net/sh4zx63w/7/
It seems silly that jQuery & jQueryUI don't wish to support CSS transforms. As a developer who uses jQuery, I would expect .draggable/.sortable to "just work".
comment:39 Changed 8 years ago by
Wonder if the jQueryUI team is interested in joining the rest of the internet yet in deving for progress yet. This was changed to "wontfix" more than 3 years ago and transforms are a lot more common (and not going anywhere anytime soon) now... along with tons more dupe tickets.
My particular case seems pretty simple and relatively common: I can't init draggable directly on an element that's been centered using transform:translateX/Y. Dragging causes the element to jump.
I could fix it myself if I could pass the draggable method an offset value on drag start, but that doesn't appear to be supported either (that I'm aware of). So...
comment:40 Changed 8 years ago by
This is a limitation from jQuery Core. We have a policy in jQuery UI not to divert away from jQuery Core's API, so it's unlikely that jQuery UI will support this use case until jQuery Core supports getting the transformed position. See http://bugs.jquery.com/ticket/8362 for some history.
comment:43 Changed 5 years ago by
https://jsfiddle.net/john7540/5mf9yjc4/15/ demonstrates an (ugly) workaround for the one case of dragging an item inside a parent that has a scaling transform applied. It works by messing with the position of the drag helper object during the drag event.
#6968 is a duplicate of this ticket.