0

jquery UI の並べ替えリストを使用して、ユーザーが 2 つのリストを選択して並べ替え、それらの間で項目を変更できるようにしています。

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/

私の問題は、すべての要素を別のリストにドラッグしてリストの 1 つを空にすると、実際にはその列が失われ、アイテムを空の列に戻すことができなくなることです。

どうすればこれを修正できますか?

ps。また、cursor:hand スタイルに応答しないのはなぜですか?

4

3 に答える 3

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 に答える