jquery - 如何知道在可调整大小的 jquery 中使用了哪个句柄

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

我使用了这个方法： 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 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

您能否为停止事件实现一个函数，然后使用 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 6

只是为了扩展@ user3322509的答案：

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