0

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

如果不熟悉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>

JS

 $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });

你可以在这里试试：http: //jsfiddle.net/9jQKu/

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

我怎样才能解决这个问题？

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

4

3 回答 3

1

Give it a width and min-height like this, i think this is the only way to fix the "bug"

min-height:250px;
width:140px;

DEMO

于 2013-09-25T12:51:34.297 回答
1

只需将您的 css 替换为以下内容： 

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

JSFIDDLE
演示

于 2013-09-25T12:54:07.813 回答
0

以我的拙见，我只想添加以下内容：

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

即使里面没有 li，它也会使您的 ul 列表存在于布局中。

我在 jsfiddle 上快速测试了它，它可以工作:)

也不是cursor:hand，但是cursor:pointer

于 2013-09-25T12:52:52.490 回答