jQuery UI Sortableがアイテムをプッシュダウン

Question

この問題を解決するためにいくつかの問題があります。私はいくつかの他の関連する質問を見てきましたが、それらのソリューションのどれも私のために働いたことはありませんあなたがの例を見ることができます

example http://img541.imageshack.us/img541/9163/examplepm.png

：このイメージで見られるように、他のソリューションに掲載されたCSS-トリックのいくつかをしようとしているにもかかわらず

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

、項目がまだ押し下げられていますここでのコード：http://jsfiddle.net/jxFBj/1/

Answer 1

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

とにかく、何が起こっているのかはわかりませんが、プレースホルダ（インラインのコンテンツはありません）がベースラインの位置を変更するように見えます。デフォルトでインライン要素である画像も変更されます。

この問題を解決するには、いくつかの方法があります：displayトリックは思わ最近のブラウザで：

.sortableList-item img { 
    display: block; 
} 

アップデート（2015年1月13日）：画像を作る

は、要素をブロック以下に述べるvertical-alignと同じ問題を有する、すなわち、要素は水平方向にシフトする。代わりに、インラインブロックの浮動要素の使用

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

：topから

.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/

垂直方向の配置を変更するには、あまりにも動作しますが、ときに、リストの水平シフトが発生します要素は複数の行にまたがるので、おそらくnオプション：

.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/