保持移位时不要保持高宽比与jQuery大小一致

Question

我正在调整一个div的大小和jQuery大小，我只想调整它的高度。

在拖动底部助手时，我只调整了大小：

$('div').resizable({
   handles: 's',
});

但是如果我按住shift键，宽度就会变。请参阅http://jsfiddle.net/6p20qjmr/3/

如何禁用此行为？

编辑：在初始可调整大小调用之后，div容器的宽度可能会发生变化。

Answer 1

我找到了一种方法，在每次调整大小事件之后使用resize参数和重新设置宽度来实现我想要的结果：

$(".resize").resizable({
    handles: 's',
    resize: function() {
        $(this).css('width', '');
    }
});

请参阅http://jsfiddle.net/6p20qjmr/4/

Answer 2

$(function() {
    var $elt = $(".resize");
    var width = $elt.width();
   $elt.resizable({
       handles: 's',
       maxWidth: width,
       minWidth: width
    });
});

这可能不是最好的解决方案，但我不太熟悉JQuery UI的可调整大小功能。我甚至不知道为什么持有shift会改变功能。如果你能解释的话，我也许能提供一个更好的解决方案，看起来不那么烦躁。

小提琴：http://jsfiddle.net/6p20qjmr/

Answer 3

var $el = $('.resize').resizable({});
var resizable = $el.data('ui-resizable');
var old_mouse_drag = resizable._mouseDrag;

resizable._mouseDrag = function(e) {
  e.shiftKey = false;
  return old_mouse_drag.call(this, e);
};

尝试：http://jsfiddle.net/e1wagrh9/