change
関数のオプションを使用して、同様の (ただし同一ではない) 問題を解決することに成功しましたsortable
。私たちの問題は、2 列のリストにいくつかの「背の高い」LI 要素があり、それらの背の高い要素が最初の列にある場合、すべての LI 要素がfloat: left
. これにより、ソート時に非常に奇妙な相互作用が発生します。
clear: both
この問題を回避するには、最初の列のすべての LI 要素 (すべての奇数要素) に適用できますが、リストに絶対配置 ( 1 つがドラッグされている場合)、偶数セレクターと奇数セレクターが破棄されます。
change
解決策は、並べ替え中に DOM が変更されるたびに呼び出されるコールバックを使用することでした。その後、jquery を使用して、実際に最初の列にある LI 要素を正確に把握し、clear: both
それらの要素に適用することができます。
function setClearsOnFirstColumn() {
var colNum = 0;
$(".myList").find( "li:not(.ui-sortable-helper)" ).each( function() {
var thisLiEl = $(this);
if( colNum == 0 )
thisLiEl.css( "clear", "both" );
else
thisLiEl.css( "clear", "none" );
colNum ++;
if( colNum == 2 ) colNum = 0;
} );
}
$(".myList").sortable( { change: setClearsOnFirstColumn, stop: setClearsOnFirstColumn } );
セレクターのnot
一部は、最初の列の LI 要素がどれであるかを判断するときに、ドラッグされている LI 要素 (その.ui-sortable-helper
クラスによって識別される) を無視するように機能します。(偶数および奇数の jquery セレクターを使用してこれを短縮することもできます。リスト内の 2 つ以上の列をサポートするためにスニペットがより一般的なケースから適応されたという理由だけで、ここではそのようには行われません。)
setClearsOnFirstColumn
リストが最初にレンダリングされた後にも呼び出す必要があることに注意してください。)