使用jqueryui对列表进行排序

我使用jQueryUI排序列表来允许我的用户选择和排序两个列表，并在它们之间更改项目

如果您不熟悉jquery排序，那么实际代码非常简单：

Html

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
</ul>

您可以在这里尝试：

我的问题是，如果您将列表中的一个元素清空，并将所有元素拖到另一个元素，那么实际上您将失去该列，并且您将无法将项目返回到空列中

我怎样才能解决这个问题

---

另外，为什么不响应光标：手型？

给它这样一个宽度和最小高度，我认为这是修复“错误”的唯一方法

---

以我的拙见，我想补充一点：

 #sortable1 {
  display:block;
  width:120px
 }

它保持你的ul列表存在于布局中，即使里面没有li

我在jsfiddle上快速测试了它，它可以正常工作：）

---

此外，它不是

光标：指针

，而是

光标：指针

只要用以下内容替换css即可：

#sortable1, #sortable2 {
  cursor:pointer;
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
  min-width:200px;

}

---

光标：指针

是IE特有的。改用

光标：指针
。
 #sortable1 {
  display:block;
  width:120px
 }

#sortable1, #sortable2 {
  cursor:pointer;
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
  min-width:200px;