Response title
This is preview!
Move this topic
draggable + css('transform','scale(2)')
in Using jQuery UI
•
2 years ago
Hi,
1. my draggable image works fine on a DIV
2. the CSS3 scale(2.0) call works fine too as a zoom factor
and makes my DIV and all elements on my DIV bigger
(like a maginifier glass)
javascript code to set the scale factor:
selector.css("transform","scale(2)").css("-moz-transform","scale(2)").css("-webkit-transform","scale(2)");
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
1. my draggable image works fine on a DIV
2. the CSS3 scale(2.0) call works fine too as a zoom factor
and makes my DIV and all elements on my DIV bigger
(like a maginifier glass)
javascript code to set the scale factor:
selector.css("transform","scale(2)").css("-moz-transform","scale(2)").css("-webkit-transform","scale(2)");
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
3
Replies(11)
Re: draggable + css('transform','scale(2)')
1 years ago
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).
-A-
Re: draggable + css('transform','scale(2)')
1 years ago
a very nice plugin!
I love it!
The only drawback: setting the handles in direction west or north is tricky...
I love it!
The only drawback: setting the handles in direction west or north is tricky...
Re: draggable + css('transform','scale(2)')
1 years ago
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?
Ciao
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?
Ciao
Leave a comment on ajflin's reply
Re: draggable + css('transform','scale(2)')
1 years ago
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:
$('#mybox').setTransform('scalex',2);
$('#mybox').setTransform('scaley',2);
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.
There's more documentation at http://plugins.jquery.com/content/transformable-030
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.
Cya,
-A-
Re: draggable + css('transform','scale(2)')
1 years ago
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...
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...
Re: draggable + css('transform','scale(2)')
1 year ago
A last little hint:
the draggable "containment" option works only if it is set to "true" or "parent".
But I think, most people will set this option to an element-id (like "#mycontainer"), as I did.
It is planned to support such "containment" options?
the draggable "containment" option works only if it is set to "true" or "parent".
But I think, most people will set this option to an element-id (like "#mycontainer"), as I did.
It is planned to support such "containment" options?
Leave a comment on ajflin's reply
Re: draggable + css('transform','scale(2)')
1 year ago
Hi ,
I use tOffset function of jquery.transformable.js v0.3 as below:
shadowBox.tOffset(transformationBox.tOffset());
But after this statement , page auto add a quote character (') before close </body> tag . Does tOffset function have error ? How to fix this bug ?
I use tOffset function of jquery.transformable.js v0.3 as below:
shadowBox.tOffset(transformationBox.tOffset());
But after this statement , page auto add a quote character (') before close </body> tag . Does tOffset function have error ? How to fix this bug ?
Attachments
- before toffset.pngSize : 32.92 KB Download : 1553
- before toffset.pngSize : 32.92 KB Download : 1524
Leave a comment on sonlamhuynh's reply
Re: draggable + css('transform','scale(2)')
10 months ago
Hello/Привет
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)
Leave a comment on dmt021's reply
Re: draggable + css('transform','scale(2)')
10 months ago
Is this (http://jsfiddle.net/bLKQj/12/) bug same as in this topic?
Leave a comment on dmt021's reply
Re: draggable + css('transform','scale(2)')
2 months ago
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.
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.
Re: draggable + css('transform','scale(2)')
2 months ago
Hi naugtur,
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.
Regards,
Akred
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
Reply to privet56's question
{"z8522995":[14737000003045115],"z6294713":[14737000002456341,14737000002513851],"z20637120":[14737000003495059,14737000003495091],"z2606523":[14737000003974672],"z6082087":[14737000002270115,14737000002481278,14737000002484310,14737000002527157,14737000002552990],"z25150941":[14737000003981205]}
Statistics
- 11 Replies
- 5535 Views
- 0 Followers
