按住 shift 时不要保持纵横比 jQuery 可调整大小

Question

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

我设法只在拖动底部助手时调整大小：

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

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

如何禁用此行为？

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

Answer 1

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

这可能不是最佳解决方案，但我对 JQuery UI 的可调整大小功能不是很熟悉。我什至不确定为什么按住 shift 会改变功能。如果你能解释一下，我也许可以提供一个看起来不那么hacky的更好的解决方案。

Fiddle: http://jsfiddle.net/6p20qjmr/

Answer 2

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

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

见http://jsfiddle.net/6p20qjmr/4/

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/

按住 shift 时不要保持纵横比 jQuery 可调整大小

Don't keep aspect ratio with jQuery resizable while holding shift

javascript

jquery

jquery-ui

jquery-ui-resizable