I'm using jQuery UI to make an image resizable like this
.resizable({
handles: 's,e,se'
});
And i would like开发者_高级运维 the se handle to keep aspect ratio, not the other one.
I've tried like this:
.resizable({
handles: 's,e'
}).resizable({
handles: 'se',
aspectRatio:true
});
But it's not working... and Idea ?
Thanks
Solved: Keeps aspect ratio when resizing with the corners, but not with the sides
[ html ]
<div class="ResizableDiv"></div>
[ javascript ]
jDiv = $('.ResizableDiv');
jDiv.resizable({
handles: "n, e, s, w, nw, ne, sw,se",
start: function( event, ui ) {
if ($(event.originalEvent.target).attr('class').match(/\b(ui-resizable-se|ui-resizable-sw|ui-resizable-ne|ui-resizable-nw)\b/)){
// Keep aspect ratio when resizing using the corners
jDiv.resizable( "option", "aspectRatio", true ).data('uiResizable')._aspectRatio = true;
}
},
stop: function( event, ui ) {
// remove aspect ratio resize
jDiv.resizable( "option", "aspectRatio", false ).data('uiResizable')._aspectRatio = false;
}
});
I answer to myself:
start: function(e,ui) {
if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
// Keep aspect ratio function
}
}
For jQuery UI resizable for single handle aspect ratio use this function $("#Resize_aspect").resizable({ aspectRatio:true });
精彩评论