jQuery - Resizable Aspect Ratio Just For One Handle

Question

I just want to protect aspect ratio from one handle. I tried to run it with this code but it doesn't helped me. Do you have any solutions?

  $( "#resizable").resizable({
   handles: 'se,e,w',
   aspectRatio: true,
    start: function(e,ui) {
      if (jQuery(e.originalTarget).hasClass("ui-resizable-se")) {
         aspectRatio: false;
      }
    }
      });

Special thanks to any solution..

EDIT: Problem SOLVED. You can see solution here: https://stackoverflow.com/a/18101710/2572291

Answer 1

There are many unanswered questions about this bug.

Here is the solution that works for you :)

http://jsfiddle.net/882k9/

    <script>
    var changedRatio  = "DK"; //DK->dont keep
    var nowResizing   = "NO";
    $(function() {
      $('#resizable').resizable({
          start:function(event,ui){
            nowResizing = "YES";
          },
          stop:function(event,ui){
            nowResizing = "NO";
          }
        });
      $(document).on('mouseenter', '.ui-resizable-e', function(){
          if(changedRatio!="DK"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              dontKeep(targetDiv);
            }
          }
      });

      $(document).on('mouseenter', '.ui-resizable-se', function(){
          if(changedRatio!="K"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              keep(targetDiv);
            }
          }
      });
      $(document).on('mouseenter', '.ui-resizable-s', function(){
          if(changedRatio!="DK"){
            if(nowResizing!="YES"){
              var targetDiv = $(this).parent().attr("id");
              dontKeep(targetDiv);
            }
          }
      });
    });

function dontKeep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
      aspectRatio:false,
      start:function(event,ui){
          nowResizing = "YES";
        },
      stop:function(event,ui){
          nowResizing = "NO";
      }
    });
    changedRatio  = "DK";
  }
  function keep(val){
    $("#"+val).resizable("destroy");
    $("#"+val).resizable({
      aspectRatio:true,
      start:function(event,ui){
          nowResizing = "YES";
        },
      stop:function(event,ui){
          nowResizing = "NO";
      }
    });
    changedRatio  = "K";
  }
    </script>


<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>