Ticket #6844 (closed feature: wontfix)

Opened 4 years ago

Last modified 7 weeks ago

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:
Blocking: Blocked by:

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

comment:1 Changed 3 years ago by scott.gonzalez

#6968 is a duplicate of this ticket.

comment:2 Changed 3 years ago by woodzu123

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:3 Changed 3 years ago by woodzu123

Any updates on this ticket?

comment:4 Changed 3 years ago by scott.gonzalez

#7263 is a duplicate of this ticket.

comment:5 Changed 3 years ago by scott.gonzalez

#7463 is a duplicate of this ticket.

comment:6 Changed 3 years ago by splinterbrain

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.

 http://jsfiddle.net/y4DYu/

comment:7 Changed 3 years ago by scott.gonzalez

  • Keywords trasform scale rotate added
  • Summary changed from Draggable issues when Element is rotated to Draggable issues when Element is transformed

comment:9 Changed 3 years ago by scott.gonzalez

#7761 is a duplicate of this ticket.

comment:10 Changed 3 years ago by scott.gonzalez

#7774 is a duplicate of this ticket.

comment:11 Changed 3 years ago by scott.gonzalez

#7865 is a duplicate of this ticket.

comment:12 Changed 2 years ago by scott.gonzalez

#8444 is a duplicate of this ticket.

comment:13 Changed 2 years ago by DmT

Why have not fixed? 18 month (yet another example  http://jsfiddle.net/bLKQj/12/)

comment:14 Changed 22 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:15 Changed 21 months ago by scott.gonzalez

#8723 is a duplicate of this ticket.

comment:16 Changed 21 months ago by mikesherov

  • Status changed from new to open
  • Type changed from bug to feature
  • Summary changed from Draggable issues when Element is transformed to Draggable: support CSS tranforms

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:17 Changed 21 months ago by tj.vantoll

See #8618 for a comparable ticket for the resizable interaction.

comment:18 Changed 21 months ago by mikesherov

  • Status changed from open to closed
  • Resolution set to wontfix

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:19 Changed 17 months ago by tj.vantoll

#9091 is a duplicate of this ticket.

comment:20 Changed 17 months ago by scott.gonzalez

#9135 is a duplicate of this ticket.

comment:21 Changed 14 months ago by scott.gonzalez

#9324 is a duplicate of this ticket.

comment:22 Changed 14 months ago by scott.gonzalez

#9297 is a duplicate of this ticket.

comment:23 Changed 14 months ago by scott.gonzalez

#9366 is a duplicate of this ticket.

comment:24 Changed 13 months ago by tj.vantoll

#9392 is a duplicate of this ticket.

comment:25 Changed 13 months ago by zkizzik

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:26 Changed 13 months ago by zkizzik

The bug have in jQuery in offset() function.

comment:27 Changed 13 months ago by WiruSSS

Here is my solution for this, work only if transform is applied on draggable element, not parent

 http://jsfiddle.net/WiruSSS/L9w6h/

comment:28 Changed 11 months ago by tj.vantoll

#9536 is a duplicate of this ticket.

comment:29 Changed 10 months ago by scott.gonzalez

#9577 is a duplicate of this ticket.

comment:30 Changed 10 months ago by scott.gonzalez

#9583 is a duplicate of this ticket.

comment:31 Changed 10 months ago by Swift42

Even Internet Explorer supports CSS transformations. I can't believe JQuery won't.

comment:32 Changed 7 weeks ago by scott.gonzalez

#10087 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.