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