Opened 7 years ago

Closed 5 years ago

Last modified 15 months ago

#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 (42)

comment:1 Changed 6 years ago by Scott González

#6968 is a duplicate of this ticket.

comment:2 Changed 6 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 6 years ago by woodzu123

Any updates on this ticket?

comment:4 Changed 6 years ago by Scott González

#7263 is a duplicate of this ticket.

comment:5 Changed 6 years ago by Scott González

#7463 is a duplicate of this ticket.

comment:6 Changed 6 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 6 years ago by Scott González

Keywords: trasform scale rotate added
Summary: Draggable issues when Element is rotatedDraggable issues when Element is transformed

comment:9 Changed 6 years ago by Scott González

#7761 is a duplicate of this ticket.

comment:10 Changed 6 years ago by Scott González

#7774 is a duplicate of this ticket.

comment:11 Changed 6 years ago by Scott González

#7865 is a duplicate of this ticket.

comment:12 Changed 5 years ago by Scott González

#8444 is a duplicate of this ticket.

comment:13 Changed 5 years ago by DmT

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

comment:14 Changed 5 years ago by Scott González

Milestone: 1.9.02.0.0

comment:15 Changed 5 years ago by Scott González

#8723 is a duplicate of this ticket.

comment:16 Changed 5 years ago by mikesherov

Status: newopen
Summary: Draggable issues when Element is transformedDraggable: support CSS tranforms
Type: bugfeature

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 5 years ago by tj.vantoll

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

comment:18 Changed 5 years ago by mikesherov

Resolution: wontfix
Status: openclosed

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 4 years ago by tj.vantoll

#9091 is a duplicate of this ticket.

comment:20 Changed 4 years ago by Scott González

#9135 is a duplicate of this ticket.

comment:21 Changed 4 years ago by Scott González

#9324 is a duplicate of this ticket.

comment:22 Changed 4 years ago by Scott González

#9297 is a duplicate of this ticket.

comment:23 Changed 4 years ago by Scott González

#9366 is a duplicate of this ticket.

comment:24 Changed 4 years ago by tj.vantoll

#9392 is a duplicate of this ticket.

comment:25 Changed 4 years 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 4 years ago by zkizzik

The bug have in jQuery in offset() function.

comment:27 Changed 4 years 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 4 years ago by tj.vantoll

#9536 is a duplicate of this ticket.

comment:29 Changed 4 years ago by Scott González

#9577 is a duplicate of this ticket.

comment:30 Changed 4 years ago by Scott González

#9583 is a duplicate of this ticket.

comment:31 Changed 4 years ago by Swift42

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

comment:32 Changed 3 years ago by Scott González

#10087 is a duplicate of this ticket.

comment:33 Changed 3 years ago by Scott González

#10595 is a duplicate of this ticket.

comment:34 Changed 3 years ago by Scott González

#10594 is a duplicate of this ticket.

comment:35 Changed 2 years ago by Scott González

#11290 is a duplicate of this ticket.

comment:36 Changed 2 years ago by Scott González

#11942 is a duplicate of this ticket.

comment:37 Changed 2 years ago by timgws

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:38 Changed 2 years ago by Scott González

#13278 is a duplicate of this ticket.

comment:39 Changed 23 months ago by relic180

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 23 months ago by Scott González

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:41 Changed 22 months ago by Scott González

#14597 is a duplicate of this ticket.

comment:42 Changed 15 months ago by Scott González

#14951 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.