Skip to main content

Search and Top Navigation

#6844 closed feature (wontfix)

Opened January 11, 2011 10:12PM UTC

Closed November 07, 2012 05:58PM UTC

Last modified January 04, 2018 04:12PM UTC

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.

Attachments (0)
Change History (43)

Changed February 11, 2011 02:51AM UTC by scottgonzalez comment:1

#6968 is a duplicate of this ticket.

Changed April 04, 2011 10:30PM UTC by woodzu123 comment:2

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

Changed April 23, 2011 08:47PM UTC by woodzu123 comment:3

Any updates on this ticket?

Changed April 26, 2011 12:45AM UTC by scottgonzalez comment:4

#7263 is a duplicate of this ticket.

Changed June 10, 2011 06:16PM UTC by scottgonzalez comment:5

#7463 is a duplicate of this ticket.

Changed June 10, 2011 06:17PM UTC by splinterbrain comment:6

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/

Changed June 10, 2011 06:17PM UTC by scottgonzalez comment:7

keywords: → trasform scale rotate
summary: Draggable issues when Element is rotatedDraggable issues when Element is transformed

Changed June 13, 2011 07:33PM UTC by rdworth comment:8

Changed October 04, 2011 01:03PM UTC by scottgonzalez comment:9

#7761 is a duplicate of this ticket.

Changed October 07, 2011 02:06PM UTC by scottgonzalez comment:10

#7774 is a duplicate of this ticket.

Changed November 11, 2011 01:47AM UTC by scottgonzalez comment:11

#7865 is a duplicate of this ticket.

Changed July 16, 2012 02:19PM UTC by scottgonzalez comment:12

#8444 is a duplicate of this ticket.

Changed July 19, 2012 10:31AM UTC by DmT comment:13

Why have not fixed? 18 month

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

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:14

milestone: 1.9.02.0.0

Changed October 24, 2012 01:21PM UTC by scottgonzalez comment:15

#8723 is a duplicate of this ticket.

Changed October 26, 2012 05:36AM UTC by mikesherov comment:16

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.

Changed November 03, 2012 10:40PM UTC by tj.vantoll comment:17

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

Changed November 07, 2012 05:58PM UTC by mikesherov comment:18

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.

Changed February 17, 2013 11:46AM UTC by tj.vantoll comment:19

#9091 is a duplicate of this ticket.

Changed March 05, 2013 04:28PM UTC by scottgonzalez comment:20

#9135 is a duplicate of this ticket.

Changed May 23, 2013 01:13PM UTC by scottgonzalez comment:21

#9324 is a duplicate of this ticket.

Changed May 23, 2013 01:14PM UTC by scottgonzalez comment:22

#9297 is a duplicate of this ticket.

Changed June 07, 2013 03:10PM UTC by scottgonzalez comment:23

#9366 is a duplicate of this ticket.

Changed June 21, 2013 03:21PM UTC by tj.vantoll comment:24

#9392 is a duplicate of this ticket.

Changed June 21, 2013 04:20PM UTC by zkizzik comment:25

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

Changed June 21, 2013 04:24PM UTC by zkizzik comment:26

The bug have in jQuery in offset() function.

Changed June 24, 2013 09:14PM UTC by WiruSSS comment:27

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

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

Changed September 05, 2013 02:39PM UTC by tj.vantoll comment:28

#9536 is a duplicate of this ticket.

Changed September 28, 2013 02:51PM UTC by scottgonzalez comment:29

#9577 is a duplicate of this ticket.

Changed October 03, 2013 11:39AM UTC by scottgonzalez comment:30

#9583 is a duplicate of this ticket.

Changed October 04, 2013 06:28AM UTC by Swift42 comment:31

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

Changed June 03, 2014 06:24PM UTC by scottgonzalez comment:32

#10087 is a duplicate of this ticket.

Changed September 10, 2014 12:40AM UTC by scottgonzalez comment:33

#10595 is a duplicate of this ticket.

Changed September 10, 2014 12:41AM UTC by scottgonzalez comment:34

#10594 is a duplicate of this ticket.

Changed March 03, 2015 02:23PM UTC by scottgonzalez comment:35

#11290 is a duplicate of this ticket.

Changed April 13, 2015 02:15PM UTC by scottgonzalez comment:36

#11942 is a duplicate of this ticket.

Changed April 14, 2015 01:07AM UTC by timgws comment:37

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

Changed June 30, 2015 01:08AM UTC by scottgonzalez comment:38

#13278 is a duplicate of this ticket.

Changed September 09, 2015 07:00PM UTC by relic180 comment:39

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

Changed September 09, 2015 07:08PM UTC by scottgonzalez comment:40

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.

Changed September 25, 2015 05:39PM UTC by scottgonzalez comment:41

#14597 is a duplicate of this ticket.

Changed April 21, 2016 08:27PM UTC by scottgonzalez comment:42

#14951 is a duplicate of this ticket.

Changed January 04, 2018 04:12PM UTC by JohnThomson comment:43

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.