7

この問題を解決するのに苦労しています。他の関連する質問をいくつか見ましたが、それらの解決策はどれもうまくいきませんでした。

this.$el.sortable({
    placeholder: 'ui-state-highlight',
    connectWith: '.connectedList',
    dropOnEmpty: true
});

他のソリューションで投稿された CSS トリックのいくつかを試したにもかかわらず、次の画像に示すように、アイテムはまだプッシュ ダウンされています。

例

ここでコードの例を見ることができます: http://jsfiddle.net/jxFBj/1/

4

1 に答える 1

12

問題の原因は、デフォルトでベースラインであるインライン要素の垂直方向の配置にあると思います。インライン要素と（インライン）ブロック要素の混合と、最終的に問題を引き起こすマージンの使用ですが。問題の実際の原因が何であるかは議論の余地があると思います。

とにかく、何が起こっているのかはっきりとはわかりませんが、プレースホルダー (インライン コンテンツを持たない) がベースラインの位置を変更しているように見えます (正確な理由はわかりません)。はデフォルトでインライン要素ですが、これも変更されます。

これを修正するには、いくつかの方法があります。

画像をブロック要素にする:

.sortableList-item img {
    display: block;
}

更新 (13.01.2015) : 最近のブラウザでは、要素が水平方向に移動するなど、以下で説明するdisplay問題と同じ問題があるvertical-align

http://jsfiddle.net/jxFBj/2/

インライン ブロックの代わりに浮動要素を使用する:

.ui-state-highlight {
    float: left;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.sortableList-item {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
}

http://jsfiddle.net/jxFBj/3/

垂直方向の配置を変更してtopも機能しますが、リスト要素が複数の行にまたがる場合は水平方向のシフトが発生するため、おそらくオプションではありません。

.ui-state-highlight {
    height: 100px;
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}

.sortableList-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    vertical-align: top;
}

http://jsfiddle.net/jxFBj/4/

于 2013-01-14T11:50:04.907 に答える