Draggable: support CSS tranforms

#6968 is a duplicate of this ticket.

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...

Any updates on this ticket?

#7263 is a duplicate of this ticket.

#7463 is a duplicate of this ticket.

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/

Related forum thread http://forum.jquery.com/topic/draggable-css-transform-scale-2

#7761 is a duplicate of this ticket.

#7774 is a duplicate of this ticket.

#7865 is a duplicate of this ticket.

#8444 is a duplicate of this ticket.

Why have not fixed? 18 month

(yet another example http://jsfiddle.net/bLKQj/12/)

#8723 is a duplicate of this ticket.

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.

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

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.

#9091 is a duplicate of this ticket.

#9135 is a duplicate of this ticket.

#9324 is a duplicate of this ticket.

#9297 is a duplicate of this ticket.

#9366 is a duplicate of this ticket.

#9392 is a duplicate of this ticket.

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 %?

The bug have in jQuery in offset() function.

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

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

#9536 is a duplicate of this ticket.

#9577 is a duplicate of this ticket.

#9583 is a duplicate of this ticket.

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

#10087 is a duplicate of this ticket.

#10595 is a duplicate of this ticket.

#10594 is a duplicate of this ticket.

#11290 is a duplicate of this ticket.

#11942 is a duplicate of this ticket.

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".

#13278 is a duplicate of this ticket.

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...

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.

#14597 is a duplicate of this ticket.

#14951 is a duplicate of this ticket.

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.