9

jQueryUIのサイズ変更の使用さまざまなルールに基づいてサイズ変更を防止しようとしています。組み込みの封じ込め機能は、絶対的に配置された要素では適切に機能しないようです。とにかく、それよりも柔軟なものが必要になります。

このようなものを持っている：

$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });

サイズ変更を防ぐために「ui」オブジェクトにどのように伝えることができますか？

ありがとう。

4

9 に答える 9

20

非常に簡単です。幅が固定され、相互に制限がある、サイズ変更可能なフローティング「左」div列のこのコードを見てください。

var maxWidthOffset, total2Width;
        $('#'+this.id).find('ul:not(:last)').resizable({
            handles: 'e',
            ghost: true,
            delay: 200,
            helper: "overmoused",
            minWidth: 20,
            start: function(e, ui) {
                maxWidthOffset = ui.element.next().width()-20;
                total2Width = ui.element.width()+maxWidthOffset+20;
            },
            resize: function(e, ui) {
                if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
                    $(this).resizable('widget').trigger('mouseup');
                }
            },
            stop: function(e, ui) {
                var w;
                if (ui.originalSize.width > ui.size.width) {
                    w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
                    ui.element.next().width(w>20 ? w : 20);
                } else {
                    w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
                    ui.element.next().width(w>20 ? w : 20);
                }
                ui.element.width(total2Width-ui.element.next().width());
            }
        });
于 2012-06-01T06:39:59.600 に答える
12

このバージョンでサイズ変更を停止する標準オプションはありません。サイズ変更を無効にすることはできますが、サイズ変更は続行され、次回の試行時にのみサイズ変更のオプションが停止します。

$(".selector").resizable("disable");

とにかく、サイズ変更イベントから直接maxWidthプロパティとmaxHeightプロパティを使用してサイズ変更を制限できることがわかりました。

$(".selector").resizable({
    aspectRatio: true,
    handles: 'all',
    resize: function( event, ui ){
        if(x > y){
            (".selector").resizable("option","maxWidth",ui.size.width);
            return;
        }
    }
});
于 2013-04-03T08:51:09.920 に答える
7

サイズ変更イベント内でUIプロパティを直接設定するだけです。（必要に応じて、停止イベントでこれを行うこともできます）：

$(".selector").resizable({
    resize: function(event, ui) {
        // set directly
        ui.size.height = 150;
        ui.size.width = 150;
    }
});

$(".selector2").resizable({
    resize: function(event, ui) {
        // return value from another function
        restrictSize(ui);
    }
});

function restrictSize(ui) {
    maxheight = 250;
    maxwidth = 300;

    ui.size.height = ui.size.height > maxheight ? maxheight : ui.size.height;
    ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
}

もちろん、ポジショニングでも同じことができます。

このフィドルを参照してください：http：//jsfiddle.net/dtwist/PrEfd/

于 2012-06-01T23:11:20.157 に答える
1

私はあなたがそのようなことをすることができると思います：

$(Selector).css("min-hight", Size);
$(Selector).css("max-hight", Size);
于 2011-02-26T04:00:54.637 に答える
1

あなたが正しいと選んだ答えは完全に正しいわけではありません。これは達成可能です：

役に立たないヘルパーを使用して、サイズ変更イベントで発生するサイズ変更を停止します。

$( ".selector" ).resizable({
  resize: function(event, ui) { 
    // resize $(this) as you wish
  },
  helper: $("</div>")
});

サイズ変更イベントで、必要に応じてサイズ変更可能な寸法と位置を変更します。停止イベントにはまだ問題があります。停止イベントがトリガーされる直前に、jqueryは要素のサイズを変更します-これは不要です。サイズ変更イベントが最後にトリガーされたときのオブジェクトの状態をリセットするだけです。したがって、停止イベントでは、トリガーされた最後の「サイズ変更」イベントで設定されたサイズ変更可能な寸法と位置をリセットできます。このためには、より高いコンテキストでいくつかの変数を宣言するか、jqueryのelement.data（）メソッドを使用する必要があります-選択（より快適に思える場合は、オブジェクト全体の非表示のクローンを作成することもできます）。最終的なコード構造の概要は次のとおりです。

$( ".selector" ).resizable({
  resize: function(event, ui) { 
    // resize $(this) as you wish and then save the dimensions and positions to some variables declared in a higher context
  },
  helper: $("</div>"),
  stop: function(){
    // restore $(this) position and location as it was last set in the resize event
  }
});
于 2013-09-18T13:05:17.223 に答える
1

久しぶりですが、誰かがこれを読んだ場合に備えて、この問題の解決策があります。

サイズ変更を防ぐには、maxWidthまたはminWidth（実行する内容によって異なります）を内部に設定する必要があります。resize

次のようなことができます。

minWidth: 300,
start: function(event, ui) {
    // get it once so we don't get it hundreds of time inside resize
    this.enforcedMinWidth = $(this).resizable("option", "minWidth");
},
resize: function(event, ui) {
    // use whatever conditions you want to stop here
    // in my original case, i was checking its width vs neighbor and
    // stops the resizing accordingly, so change it to fit your case
    if (ui.element.next().width() <= this.enforcedMinWidth) {
        $(this).resizable("option", "maxWidth", ui.size.width); 
    }
},
stop: function(event, ui) {
    // reset
    $(this).resizable("option", "maxWidth", null);
    // cleanup
    delete this.enforcedMinWidth;
}
于 2014-12-02T17:44:38.147 に答える
0

現在のバージョンでは不可能のようです。

于 2011-02-26T03:30:30.870 に答える
0

startとの両方をインターセプトすることによる厄介な方法が1つありますresize：

resize: function(event, ui) {
    if (RULE) {
        $(this).resizable('widget').trigger('mouseup');
        var save = window.savePosition;
        save.width  += 4;
        save.height += 4;
        $(ui.helper).css(save);
        return;
    }
},
start: function(event, ui) {
    if (RULE) {
        window.savePosition = $.extend({ }, ui.size, ui.position);
    }
}

残念ながら、サイズ変更ハンドルには4ピクセルの「境界線」があるため、サイズ変更操作を中止するときにサイズ変更可能な領域が「スキップ」しないように、わずかな修正を適用する必要があります。

このソリューションは、常に同じルールが適用されると仮定して、保存を初期位置に戻します。もちろん、初期位置とサイズを保存せずに、サイズ変更中にその場で再計算することで、これを適応させることができます。その場合、傍受する必要はまったくありませんstart。

于 2015-03-07T10:28:22.713 に答える
0

mousedown状態を継続する必要がない場合は、mouseupをトリガーするだけです。

var resizableSettings = {
    start: function(event, element) {
        if (a > b) {
            $(this).trigger('mouseup');
        }
    }
};

ただし、ユーザーがdivをドラッグするなど、マウスダウン状態を継続する必要がある場合があります。

以下は、すでに述べたアイデアのいくつかを使用した例です。

var resizableSettings = {
    start: function(event, element) {
        if (a > b) {
            $(this).resizable('option', {
                'maxWidth': element.size.width,
                'minWidth': element.size.width,
                'maxHeight': element.size.height,
                'minHeight': element.size.height
            });
            return;
        }
        $(this).resizable('option', {
            'maxWidth': false,
            'minWidth': false,
            'maxHeight': false,
            'minHeight': false
        });
    }
};
于 2019-07-15T17:04:23.470 に答える