jQuery UI可排序边框底部拖动

我有一个可排序的jqueryui。每个项目的周围都有一个边框，但为了防止项目之间出现双边框，我删除了项目底部的边框。相反，我在容器上添加了一个边框底部

虽然乍一看它看起来是正确的，但在开始拖动图元时，它并不起作用。此时，它显示该项没有底部边框。如何在拖动时在项目周围有一个边框，同时在不拖动时防止出现双边框

html

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

js

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

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

---

我自己找到了解决办法。只保留li元素的边框，并向其添加负边距，这样做很有效

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

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