jQuery UI可排序邊框拖動底部

Question

我有一個可工作的jQuery UI可排序。在每個項目周圍都有一個邊框，但是爲了防止項目中刪除邊框底部的項目之間的雙邊框。相反，我在容器上添加了一個邊框底部。

http://jsfiddle.net/6oxdwb6g/1/

雖然它看起來是正確的它乍一看，它不開始拖動元素時很好地工作。此時它顯示該項目沒有邊框底部。我怎樣才能在拖動的項目周圍有一個邊框，同時在不拖動的情況下防止出現雙邊框？

HTML

<ul id="sortable"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 

CSS

#sortable { 
    list-style-type: none; 
    margin: 20px; 
    padding: 0; 
    border-bottom: 1px solid #ddd; 
} 

#sortable li { 
    border: 1px solid #ddd; 
    border-bottom: none; 
    padding: 20px; 
} 

JS

$(function() { 
    $("#sortable").sortable(); 
}); 

Answer 1

我找到了自己的解決方案。只保留邊界元素給li元素並添加一個負邊界來實現它。

http://jsfiddle.net/6oxdwb6g/2/

#sortable { 
    list-style-type: none; 
    margin: 20px; 
    padding: 0; 
} 

#sortable li { 
    border: 1px solid #ddd; 
    padding: 20px; 
    margin-bottom: -1px; 
}