6

サイズ変更可能なjqueryを使用して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

ありがとう

4

6 に答える 6

17

軸は、次のui-resizableように要素のデータとして配置されます。

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

于 2014-08-12T14:54:45.717 に答える
3 
// 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;
    }
});
于 2013-12-30T05:14:50.360 に答える
0

停止イベントの関数を実装してから、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
        }
    }
于 2011-08-19T09:48:41.343 に答える
0

変更されました

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はハンドル名を返します:)

于 2011-08-19T10:32:54.253 に答える
0

私はこの方法を 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
        }
      } 
    )};
于 2012-12-12T03:28:53.500 に答える
0

@ user3322509による回答を拡張するだけです：

$("#selector").resizable({      
    resize: function(e,ui) {
        console.log( ui.element.data("ui-resizable").axis )
    }
});
于 2017-12-04T14:47:15.107 に答える