6

私は、60 日間で 1 日あたり最大 5 つの並べ替え可能なアイテムで運用されているカレンダーを持っているので、それは 300 個の並べ替え可能なアイテムです。日は<td>要素で、イベントは<div>s です。

1 日以内の並べ替えと、ある日から別の日へのドラッグの両方が低速です。要素は、新しい日に入るとき、または別の並べ替え可能なアイテムを通過するときに、少しフリーズします。

遅延は、日数とソート可能なアイテムの数の両方に関連しているようです。

ここにjQueryコードがあります。

$('.calendar-schedule-day').sortable({
    items: ".service-trip, .calendar-event",
    connectWith: ".calendar-schedule-day"
});

ソート時に発生する遅延を減らすにはどうすればよいですか?

より詳しい情報

chrome が何度も呼び出しLayoutている場合RecalculateStyle、次の警告が表示されます。

レイアウト - 詳細
期間 15.000 ミリ秒 (36.86 秒で)
注 強制的な同期レイアウトは、パフォーマンスのボトルネックになる可能性があります。
無効化されたレイアウト
....

更新: jsFiddle here - 使用できないほど遅いため、問題が再現されるかどうかわかりません。生産ではそうではありません。しかし、例から html (数週間など) を削除し始めると、とにかく問題を再現できない可能性があります。

4

1 に答える 1

6

sortable を呼び出す前にすべてのソート可能な要素を非表示にし、その後、それらを再度表示することで、はるかに高速になったようです。

$('.calendar-schedule-day').hide();
$('.calendar-schedule-day').sortable({ ... });
$('.calendar-schedule-day').sortable({ connectWith: ... });
$('.calendar-schedule-day').show();

JSFiddle

それを修正するより良い方法

使用するとき$('.calendar-schedule-day:visible')の代わりに、このセレクターを使用してください$('.calendar-schedule-day').sortable()

JSFiddle

hide 要素が sortable を台無しにしているように見えるので、visible 要素のみを sortable にします。

于 2013-04-17T19:12:05.987 に答える