jQuery UI Sortable推下項目

Question

我有一些麻煩解決這個問題。我已經看了一些其他相關的問題，但這些解決方案都不適合我。

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

儘管嘗試了一些被張貼在其他解決方案的CSS-招數，項目仍然會向下推動這個圖像所見：

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

你可以看到的一個例子代碼在這裏：http://jsfiddle.net/jxFBj/1/

Answer 1

我會說問題的根源是內聯元素的垂直對齊，這是缺省情況下的基準。雖然它是內聯和（內聯）塊元素的組合，並且最終觸發問題的餘量的使用。我想這個問題的實際來源是什麼是有爭議的。無論如何，我無法確定發生了什麼事，但對我來說，它看起來像佔位符（沒有內聯內容）會改變基線的位置（不確定爲什麼），所以位置默認情況下內聯元素的圖像也會發生變化。

有幾種方法來解決這個問題：

使圖像塊元素：

.sortableList-item img { 
    display: block; 
} 

更新（2015年1月13日）：最近瀏覽器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工作過，但會引起水平移動時的列表元素跨越多行，所以這可能不是一個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/