6

ここでサイズ変更に問題があります。.resizable()次のcssを使用して、divでJQueryを使用しています:

div#resizable {
   float: left;
   border: solid 1px white;
   box-shadow: 0px 0px 0px 1px #F2F2F2;
   box-sizing: border-box;
   padding: 15px;
}

また、他の多くの div やその他のものも含まれています。私はこのように添付しresizableます：

$( "#resizable" ).resizable({ minWidth: 200, 
                              maxWidth: 597, 
                              minHeight: 240,
                              resize: widgetResizeListener 
                            });

今のwidgetResizeListener()ところ、コンソールに何かを記録するだけです。

横にドラッグしてdivの高さを変更しようとするとui-resizable-s、自動的にdivの幅が約30px. ドラッグを開始するたびに発生します。そのため、毎回必要な幅が失われます。幅を変更すると、高さでも同じことが起こります。

それは私のdivのパディングのせいなのだろうか？以前は、パディングがない場合、そのような「ジャンピー」は発生しませんでした。本当に必要なため、パディングを削除できません。では、この問題はどのように解決できるのでしょうか。JQuery resizable()にパディングを含める方法はありますか?

どんな助けでも感謝します、ありがとう...

4

5 に答える 5

21

box-sizing: border-box;とパディングの組み合わせだと思います。resizable-functionは、このcss-propertyで失敗します。

ボックスのサイズをデフォルト（box-sizing: content-box）に変更するか、パディング用の内部コンテナを作成してみてください。

于 2012-06-06T09:50:37.700 に答える
2

私の場合のように box-sizing プロパティを削除することが問題外である場合、役立つ別の解決策を見つけました。それは最もきれいではありませんが、うまくいきます。正確なコードをテストしませんでしたが、サイズ変更中にパディング幅を追加し、停止したら元に戻す必要があるという考えです。重要: 要素にパディングがない可能性がある場合は、if ステートメントを追加して、パディング値が設定されているかどうかを判断する必要があります。

var padLeft, padRight, padTotal; // define vars 

$('#resize').resizable({

start: function(event,ui){
   padLeft = this.css('padding-left').replace('px','');
   padRight = this.css('padding-right').replace('px','');
   padTotal = parseFloat(padLeft + padRight);
   ui.size.width = ui.size.width + padTotal;
},
resize: function(event,ui){
   ui.size.width = ui.size.width + padTotal;
},
stop: function(event,ui){
   this.css('width',ui.size.width - padTotal); 
}

});
于 2013-01-08T05:45:47.643 に答える
1

私はこれが古い問題であることを知っていますが、すべての要素にボックスサイズのボーダーボックスを適用する Foundation ライブラリを使用しているため、同じ問題に遭遇しました。jQuery UI のサイズ変更可能なウィジェット コードの 1 行を編集することで修正できます。修正は

_mouseCapture

そして、次のコードを適用しました

var padLeft = el.css('padding-left').replace('px','');
var padRight = el.css('padding-right').replace('px','');
var padTotal = parseFloat(Number(padLeft) + Number(padRight));

this.originalSize = this._helper ? { width: el.outerWidth() + padTotal, height: el.outerHeight() + padTotal } : { width: el.width() + padTotal, height: el.height() + padTotal};

私が行ったように、高さの値を編集する必要がある場合とない場合があります。サイズ変更可能な div、つまり各グリッド要素の基礎コンテナ、またはその中にネストされた div に応じて、高さ調整を削除するか含める必要がありました。

コア ライブラリを変更せずに jQuery ウィジェットを編集する方法については、こちらをご覧ください。

jquery ui ウィジェットを拡張するには? (1.7)

サイズ変更可能なオブジェクト関数のさらに下にエラーが発生しています。誰かがこれについて提案があれば、私はそれらを聞くことに興奮しています.

于 2014-05-15T17:38:31.240 に答える
0

この問題に対処するには、'handles' パラメータを使用できます。このような：

$( "#resizable" ).resizable({handles: 'e,w'});
于 2016-12-20T08:21:08.183 に答える