jquery - ヘルパーを使用したJqueryのサイズ変更可能なバグ、1pxを失う

Question

ヘルパーでサイズ変更可能な jquery にバグがあります。片側のみを使用して div のサイズを変更すると、反対側は 1 ピクセル失われます。

ここでこれをテストできます: http://jqueryui.com/resizable/#helper

たとえば、ブラウザの Element Inspector を使用して、メトリクス/レイアウトを確認します。右側のサイズを変更しようとすると、下側が 1 ピクセル失われることがわかります。

Answer 1

前の答えは私の（同じ）問題を解決しませんでした。私はこのようにそれを解決しました：

$(".resizable").resizable({
  helper: "ui-resizable-helper",
  start: function( event, ui ) {
    $(ui.helper).height(ui.originalSize.height);
    $(ui.helper).width(ui.originalSize.width);
 }
});

これにより、最初にヘルパーのサイズが強制されます。

Answer 2

サイズ変更可能な init で、開始イベントを次のように配置します。Ps: サイズ変更可能なコンポーネントにはグリッド [5,5] があるため、module(%) を使用して、いずれかの側が 1 ピクセルを失ったかどうかを検証してから、1 ピクセルを再度追加します。

$(".resizable").resizable({
  helper: "ui-resizable-helper"
 ,grid: [5,5]
 ,start: function( event, ui ) {
    if ((ui.size.height%5) != 0) ui.size.height += 1;
    if ((ui.size.width%5) != 0)  ui.size.width  += 1;
 }
});

これが皆さんのお役に立てば幸いです!!!