ユーザーがダッシュボード ビューをカスタマイズできるように、作成中のダッシュボードに jQuery ソート可能を実装しています。
ハンドルをクリックすると、ダッシュボードの左側と中央にある要素が正しく動作します。ただし、右端の要素をドラッグしようとすると、奇妙な動作が表示されます。グリッドの周りにドラッグ アンド ドロップすることはできますが、マウスがハンドルに残っていません...ボックスが画面を飛び越えています。
ここで何が起こっているのですか？エッジ ボックスでのみ発生するのはなぜですか? これを修正する方法はありますか?
これがライブダッシュボードです。ソースを表示してコードを確認します。
正しい動作のスクリーンショットを次に示します。マウスは移動記号のそばのボックスの角にあります:
これは、奇妙な動作のスクリーンショットです。マウスは実際には空の灰色のスペースにありますが、モジュールはブラウザーの左下隅にジャンプしています。
これは、ブラウザーのパーセンテージ値の計算に関係しています。
さまざまなコンポーネント間でブラウザーの幅を正確に 100% 使い切ろうとしています。たとえば、ブラウザーがブラウザーの幅の 23% を 4 倍して計算し、マージンの 1% を 8 倍 (合計すると予想される 100%) と計算した場合、それらの合計がコンポーネントは、丸めた後、ブラウザー ウィンドウの実際の幅を超えません。特定の合計幅は機能しますが、他の幅は機能しません。
これを数学で分解してみましょう。幅を 503px に制限すると、次のように計算すると、最大幅を超えていることがわかります。
503px * 0.23幅= 115.69 ≈ 116px
503px * 0.01マージン= 5.03 ≈ 5px
(4ボックス*ボックスあたり116px ) + (4ボックス*マージン2 つ*マージンあたり5px ) = 464px + 40px = 504px
デモ (不適切な動作) - 最大幅が に設定されています503px
ただし、幅を 500px に制限すると、計算はたまたま期待どおりに機能します。
500px * 0.23幅= 115px
500px * 0.01マージン= 5px
(4ボックス*ボックスあたり115px ) + (4ボックス*マージン2 個 * マージンあたり5px ) = 460px + 40px = 500px
デモ (正しい動作) - 最大幅を に設定500px
これは、ページの右端で折り返しが発生するため、ページの右端にあるアイテムに対してのみ発生します。に設定されているアイテムは、float: left使用可能な水平スペースが十分にない場合に折り返されます。そのため、アイテムは基本的に次の行の最初の場所に移動します。
実際の問題は、初期状態が影響を受けないことを考えると、並べ替え中に jQuery UI によって実行される追加の計算と DOM 操作によって引き起こされるようです。