1

この問題は、説明するよりも簡単に見ることができます。ここを参照してください: jsFiddle

何が起こっているのかをより明確に理解するために、フィドルを更新して、クラス.ui-sortable-placeholderを赤く表示するようにしました。これは、ソート可能に関連する (通常は) 非表示の jQueryUI 要素のクラスです。ここに見られるように: http://jsfiddle.net/rLW9m/9/。彼の答えでそれを指摘してくれたジョージに感謝します。この回答により、おそらく「何」までは解決済みと見なすことができますが、おそらく「なぜ」はまだ未定です。

示されている 3 つのシナリオのうち、それらはすべてfloat:leftLI 要素に適用されますが、最後のシナリオはうまく動作しません。並べ替えられたアイテムの最後の束で、最初または 2 番目のアイテムをクリックすると、リストの残りの部分が、それらがちょうど入っていた (そしてアイテムがクリックされた) 行の下に「ドロップ」されます。

このシナリオは、CSS ファイルを介して同じ変更を適用するのではなく、インライン スタイルを使用float:leftして CSS を に直接適用する場合に示されます。<li>これは jQueryUI のバグですか?

jQueryUI のドキュメント(jsFiddle の最初の例)と同じ方法で要素に CSS を適用すると、並べ替えは問題なく行われます。ただし、同じ CSS (私が理解している限り) がリスト項目に直接適用されると、上記のように並べ替えの動作が不安定になります。

jQueryUI をグリッド内で適切にソートする方法は、クラスまたはその他のメカニズムを使用して CSS ファイルのみにフロートを適用することです。

/* Starting from UL descriptor with LI descendants */
.ulClass li {
    float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
    float:left;
}
/* DOES NOT WORK properly to directly apply CSS 
   (items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
    <li style='float:left'>test</li>
    <li style='float:left'>three</li>
</ul>

これら 2 つの CSS アプリケーションが jQueryUI によって異なる方法で処理されるのはなぜですか? それがレンダリングされると、リスト要素自体がfloat:leftどちらか一方のように見えます。あなたの見解は何ですか？CSS をリスト要素に直接適用しても、期待どおりの動作が得られないのはなぜですか?

編集: ジョージのおかげで、何が起こっているのかをよりよく理解できるようになりました。jQueryUIが要素のインライン スタイルを「プレースホルダー要素」にコピーしないが、クラスの詳細を渡すのには、おそらくいくつかの正当な理由があります。jQueryUI の専門家が後で現れ、これをバグと見なした場合は、報告してよかったと思っています。それまでは、並べ替え可能な要素の float をclass!経由で適用してください。インライン スタイルがプレースホルダーに含まれていない理由を説明できますか?

4

1 に答える 1

3

問題は、jqueryUI が挿入するプレースホルダーに float left スタイルがないことです。jQueryUI は、プレース ホルダー用に並べ替えているアイテムの要素タイプとクラスを複製しますが、インライン スタイルは複製しないように見えます。

于 2013-07-12T16:54:45.033 に答える