拖动时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;
}