3. my draggable image works now a little incorrect on the scaled DIV: the position of the dragged image will be calculated wrong
Is there a solution for this HTML5 scaling question? Ciao
Webkit and Mozilla give different answers when you ask for the offset of a transformed element. Webkit will give you the top,left as transformed and mozilla will give you top,left as if the element was not transformed (if I remember correctly).
I've normalized the behavior to give you the correct top,left as well as the position of the corners and center in the jquery.transformable.js plugin. Use the elem.tOffset() function described in the instructions and it should give you reasonably consistent results across browsers (though I'm not sure about msie).
The transformable-plugin is a lot better than the default resizable/draggable/moveable functions!
Nevertheless, there are some little bugs:
1. rotation is not always correct if a parent element has a scale attribut (e.g. "-moz-transform","scale(2)) you can check it on http://fiddle.jshell.net/aflin/vbSMy/show/ if you insert "-moz-transform: scale(2);" as style-attribut of <body>
2. the draggable works incorrect with "-moz-transform: scale(2);" too: it drags too far (or too less, if scale < 1)
3. the behaviour of the resizable-setting "handles:w,e,n,s" is surprising: a resizing towards west causes a resizing towards east! (and "handles:'all'" is not understood)
Are my problems known? Is there a known solution for these problems? Is there a more appropriate forum group to place these remarks than here?
Handles: I've not yet addressed any other handle positions except the se for resizing. Its on my todo.
Scale: I was unable to reproduce your problem. I am using "transform: matrix(a,b,c,d,e,f)" instead of scale, rotate and skew. Try using the functions built into jquery.transformable.js to apply your transformations and it will translate them into the proper matrix values. Example:
That will set the scale in a cross-platform way and allow it to interact with the rest of the functions in jquery.tranformable.js.
If that doesn't work for you, please set up something on jsfiddle for me to look at and I'll see what I can do.
Also, I may have stopped calculatiing the total transform of a nested object before <body>. I'll look into that. If that is the case, in the mean time you might be able to just wrap everything in your body in another 100% sized div and apply the transform to that.
Sorry for the false alarm: Rotation works if my the parent element is scaled, too.
My fault was, that I scaled the parent element too big, so I had only a small room in the window for rotating with the mouse. The rotation handle works correctly, If I drag the rotation-handle further away, but reacts lazy when I drag in a short distance. Effect: you scale the parent very big, so you have no room for rotating with the mouse...
The last remark: I'm checking currently, if drag&drop (=draggable) works, if I drop an element from a not-scaled parent-element into a scaled parent element. I'll remark my results...
I wonder what is the correct solution of this problem? A year has passed, but draggable still does not work correctly with css transform ('-webkit-transform: translate (25%, 25%) scale (1.5)' for example)
I have just successfully made draggable and selectable work with a scaled container (parent of the draggables scaled) by patching jQuery UI code (little changes)
To make it work with all the features the code would have to have some separation between mouse coordinate system and elements' coordinate system. Now they're all mixed up and merged together into some intermediate values.
Can you please explain how you have done the draggable to work after the scaled container. I am having issues with the mouse pointer while dragging the div, the mouse goes out of the div area but i can able to drag. Can you advice me about my issue.
Leave a comment on naugtur's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic