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; 
}