Opened 5 years ago

Closed 3 years ago

Last modified 13 days 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 5 years ago by scottgonzalez

#6968 is a duplicate of this ticket.

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

Any updates on this ticket?

comment:4 Changed 5 years ago by scottgonzalez

#7263 is a duplicate of this ticket.

comment:5 Changed 5 years ago by scottgonzalez

#7463 is a duplicate of this ticket.

comment:6 Changed 5 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 5 years ago by scottgonzalez

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

comment:9 Changed 5 years ago by scottgonzalez

#7761 is a duplicate of this ticket.

comment:10 Changed 5 years ago by scottgonzalez

#7774 is a duplicate of this ticket.

comment:11 Changed 4 years ago by scottgonzalez

#7865 is a duplicate of this ticket.

comment:12 Changed 4 years ago by scottgonzalez

#8444 is a duplicate of this ticket.

comment:13 Changed 4 years ago by DmT

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

comment:14 Changed 4 years ago by scottgonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:15 Changed 4 years ago by scottgonzalez

#8723 is a duplicate of this ticket.

comment:16 Changed 4 years ago by mikesherov

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

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

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

comment:18 Changed 3 years ago by mikesherov

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

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

#9091 is a duplicate of this ticket.

comment:20 Changed 3 years ago by scottgonzalez

#9135 is a duplicate of this ticket.

comment:21 Changed 3 years ago by scottgonzalez

#9324 is a duplicate of this ticket.

comment:22 Changed 3 years ago by scottgonzalez

#9297 is a duplicate of this ticket.

comment:23 Changed 3 years ago by scottgonzalez

#9366 is a duplicate of this ticket.

comment:24 Changed 3 years ago by tj.vantoll

#9392 is a duplicate of this ticket.

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

The bug have in jQuery in offset() function.

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

#9536 is a duplicate of this ticket.

comment:29 Changed 3 years ago by scottgonzalez

#9577 is a duplicate of this ticket.

comment:30 Changed 3 years ago by scottgonzalez

#9583 is a duplicate of this ticket.

comment:31 Changed 3 years ago by Swift42

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

comment:32 Changed 2 years ago by scottgonzalez

#10087 is a duplicate of this ticket.

comment:33 Changed 20 months ago by scottgonzalez

#10595 is a duplicate of this ticket.

comment:34 Changed 20 months ago by scottgonzalez

#10594 is a duplicate of this ticket.

comment:35 Changed 14 months ago by scottgonzalez

#11290 is a duplicate of this ticket.

comment:36 Changed 13 months ago by scottgonzalez

#11942 is a duplicate of this ticket.

comment:37 Changed 13 months 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 10 months ago by scottgonzalez

#13278 is a duplicate of this ticket.

comment:39 Changed 8 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 8 months ago by scottgonzalez

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 7 months ago by scottgonzalez

#14597 is a duplicate of this ticket.

comment:42 Changed 13 days ago by scottgonzalez

#14951 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.