Question

我正在使用jquery resizable来调整div的大小

$("#mainDiv").resizable({
        handles: 's, e',
        start: function(event, ui) { 
        // want to perform some action here
    },
        resize: function(event, ui) { 
        // want to perform some action here }
    });

现在我想基于以下事实来做一些事情，即选择s或e来调整大小基本上调整大小是垂直还是横向如何做到

由于

Answer 1

将轴作为数据放在ui-resizable下的元素上，如下所示：

$(element).data('ui-resizable').axis

Answer 2

// the following will return direction as "n", "e", "s", "se" etc.
$("#selector").resizable({
    resize: function(e, ui) {
        // for jquery-ui 1.9.2
        var direction = $(this).data('resizable').axis;
        // for jquery-ui 1.11.4
        var direction = $(this).data('ui-resizable').axis;
    }
});

Answer 3

你能为stop事件实现一个函数，然后使用ui.originalSize和ui.size检查元素是否已经水平或垂直调整大小，例如：

    stop: function(event, ui) {
        if (ui.originalSize.width !== ui.size.width) {
            //element has been resized horizontally
        }
        if (ui.originalSize.height !== ui.size.height) {
            //element has been resized vertically
        }
    }

Answer 4

完成了改变

ui: function() {
    return {
        originalElement: this.originalElement,
        element: this.element,
        helper: this.helper,
        position: this.position,
        size: this.size,
        originalSize: this.originalSize,
        originalPosition: this.originalPosition,
        };
}

到

ui: function() {
    return {
        originalElement: this.originalElement,
        element: this.element,
        helper: this.helper,
        position: this.position,
        size: this.size,
        originalSize: this.originalSize,
        originalPosition: this.originalPosition,
        handle : this.axis
    };
}

ui.handle返回句柄名称：）

Answer 5

我用这个方法： https://stackoverflow.com/a/13832254/1896534

 var handleTarget; //set scope

    $('#resize-this').resizable({
      handles: 'n,e,s,w',

      start: function(ui,event){
        handleTarget = $(event.originalEvent.target);
      },

      resize: function(ui,event){
        if (handleTarget.hasClass('ui-resizable-s'){
           //do stuff
        }
      } 
    )};

Answer 6

只需通过@ user3322509扩展答案：

$("#selector").resizable({      
    resize: function(e,ui) {
        console.log( ui.element.data("ui-resizable").axis )
    }
});

如何知道在jquery resizable中使用哪个句柄

6 个答案: