jQuery UI Resizable을 사용하여 가로 또는 세로로만 크기를 조정하는 방법은 무엇입니까?

내가 찾은 유일한 해결책은 현재 값으로 최대 및 최소 높이 또는 너비를 설정하는 것입니다.

예:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

그러나 이것은 정말 추합니다. 특히 프로그래밍 방식으로 요소의 높이를 변경해야하는 경우 더욱 그렇습니다.

다음 과 같이 왼쪽과 오른쪽 (또는 동쪽 / 서쪽)에만 표시 되도록 크기 조정 handles옵션 을 설정할 수 있습니다 .

foo.resizable({
    handles: 'e, w'
});​

여기에서 시도해 볼 수 있습니다.

포스터는 주로 가로 전용 크기 조정을 요구했지만 질문은 세로도 요구합니다.

수직 케이스에는 특별한 문제가 있습니다. 브라우저 창 크기를 조정할 때에도 유지하려는 상대 너비 (예 : 50 %)를 설정했을 수 있습니다. 그러나 jQuery UI는 처음 요소의 크기를 조정하고 상대 너비가 손실되면 절대 너비를 px로 설정합니다.

이 사용 사례에서 작동하는 다음 코드를 찾은 경우 :

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

http://jsfiddle.net/cburgmer/wExtX/ 및 jQuery UI 크기 조정 가능 : 동쪽 핸들 만 사용할 때 자동 높이 참조

매우 간단한 솔루션 :

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

이것은 draggable ()에서도 작동합니다. 예 : http://jsfiddle.net/xCepm/

해결책은 크기 조정을 구성하여 원하지 않는 차원의 변경을 취소하는 것입니다.

다음은 세로로만 크기를 조정할 수있는 예입니다.

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
}); 

브라우저 크기를 조정할 때 너비 크기를 조정하고 싶었지만 사용자가 요소의 크기를 변경할 때는 제대로 작동하지 않았습니다.

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
}); 

나에게 핸들과 resize핸들러 가 모두있는 솔루션 은 잘 작동했기 때문에 사용자는 핸들을 볼 수 있지만 가로로만 크기를 조정할 수 있으며 유사한 솔루션이 세로로 작동해야합니다. 오른쪽 하단 핸들러가 없으면 사용자는 요소의 크기를 조정할 수 있다는 사실 을 모를 수 있습니다 .

사용하는 경우 ui.size.height = ui.originalSize.height;는 것입니다 제대로 작동하지 요소는 초기 상태에서의 크기를 변경 한 경우.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

더 나은 성능 $(this)을 위해 제거 할 수 있습니다.

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>