jquery - インラインブロック表示でソート可能なjqueryの表示キズ

Question

JQuery で接続された並べ替え可能なリストを操作しようとしていますが、li CSS で display:inline-block を使用すると、プレースホルダーと配置が正しくありません。通常はそれよりも高く、アイテムのサイズが変更されるため、ワードラップが発生します。

ここで display:inline-block を float:left で変更すると

ul.fieldlist li
{
        display:inline-block;
        list-style-type: none;
}

その後、ドラッグドロップは正常に機能していますが、何らかの理由で元のソート可能にドラッグできません。

問題を示すためにjsfiddleを作成しました：

パディング/マージンに問題がある可能性がありますが、わかりませんでした。

どんな助けでも大歓迎です:)

score 0 · Accepted Answer

ここでの問題は、それぞれのサイズが可変テキストコンテンツによって決定されるインラインブロックを並べ替えようとすることによって発生します。

1つの修正は

vertical-align: top別のユーザーの提案に従って設定
a)各インラインブロックコンテナーのサイズを修正するか、b)white-space: nowrap複数の単語を含むコンテナーをドラッグするときに行の高さが 2 倍にならないように、それぞれに設定します。

コンテナーはコンテナー内のテキストによってサイズが決まるため、オプションa)を実行するには、理想的にはドラッグの開始時に JavaScript を使用する必要があります (ただし、リストが変化しない場合は、ページの読み込み時に一度実行できます)。次のようなもの (正しい li セレクターとドラッグイベント名を指定する必要があります...):
```
$('.li').on('dragStart', function (e) {
  var $this = $(this);
  $this.width( $this.width() );
  $this.height( $this.height() );
});
```
最後に、各コンテナーの行の高さを修正して、インライン画像や大きなテキストによって行の高さが異なる状況を回避する必要がある場合があります (この jsfiddle の例では問題ではありませんが、その問題を抱えている可能性のある他の人のために言及します)。

2 に答える 2