Draggable: support CSS tranforms
|Reported by:||maciel310||Owned by:|
|Keywords:||trasform scale rotate||Cc:|
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 (42)
comment:7 Changed 6 years ago by
|Keywords:||trasform scale rotate added|
|Summary:||Draggable issues when Element is rotated → Draggable issues when Element is transformed|
comment:16 Changed 4 years ago by
|Status:||new → open|
|Summary:||Draggable issues when Element is transformed → Draggable: support CSS tranforms|
|Type:||bug → feature|