开发者

jQuery UI - Resize - Only one handle with aspect ratio

开发者 https://www.devze.com 2023-01-15 17:29 出处:网络
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'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 });

0

精彩评论

暂无评论...
验证码 换一张
取 消