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