0

我只想保护一个手柄的纵横比。我试图用这段代码运行它，但它没有帮助我。你有什么解决办法？

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

特别感谢任何解决方案..

编辑：问题已解决。您可以在此处查看解决方案：https ://stackoverflow.com/a/18101710/2572291

4

4 回答 4

2

关于这个错误有很多未解决的问题。

这是适合您的解决方案:)

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>
于 2013-08-07T11:03:20.293 回答
2

对我有用的轻微变化，可能是因为 jQuery 的更新版本。四个角的手柄将保持纵横比，而侧面的手柄则不会。

$elements.resizable({
  handles: "all",

  start: function(event, ui) {
    var handle = $(this).data('ui-resizable').axis;

    // We should maintain the aspect ratio for corners, not for sides
    var maintain_aspect_ratio = (["n", "e", "s", "w"].indexOf(handle) == -1);

    $(this).resizable( "option", "aspectRatio", maintain_aspect_ratio )
      .data('ui-resizable')
      ._aspectRatio = maintain_aspect_ratio;
  }, 

  ...
于 2018-02-20T17:45:30.760 回答
1

一个对我有用的简单解决方案

var is_se = ($(this).data('uiResizable').axis == "se");
$(this).resizable( "option", "aspectRatio", is_se ).data('uiResizable')._aspectRatio = is_se;
于 2014-12-18T10:44:03.517 回答
0

我认为您应该提供纵横比而不是true.

aspectRatio: 16 / 9

或者

aspectRatio: 4 / 3

参考http://jqueryui.com/resizable/#aspect-ratio

或者

$( "#resizable:not(ui-resizable-se)").resizable({
   handles: 'se,e,w',
   aspectRatio: 16/9
});
于 2013-08-02T11:53:30.140 回答