2012-02-14 13 views
0

複数の順序付けされていないリストを並べ替える必要があります。JQuery UI:複数の順序付けられていないリストの間でリスト項目を移動する

例:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
    <script> 
     $(function() { 
      $(".connectedSortable").sortable({ 
       connectWith: ".connectedSortable" 
      }).disableSelection(); 
     }); 
    </script> 
</head> 
<body> 
<div id="list"> 
    <ul id="list1" class="connectedSortable"> 
     <li title='1'>Foo1</li> 
     <li title='2'>Foo2 
      <ul id="list3" class="connectedSortable"> 
       <li title='3'>FooBar1</li> 
       <li title='4'>FooBar2</li> 
       <li title='5'>FooBar3</li> 
       <li title='6'>FooBar4</li> 
      </ul> 
     </li> 
     <li title='7'>Foo3</li> 
     <li title='8'>Foo4</li> 
     <li title='9'>Foo5</li> 
     <li title='10'>Foo6</li> 
     <li title='11'>Foo7</li> 
    </ul> 
    <ul id="list2" class="connectedSortable"> 
     <li title='12'>Bar1</li> 
     <li title='13'>Bar2</li> 
     <li title='14'>Bar3</li> 
    </ul> 
</div> 
</body> 
</html> 

私も、私は、リストのアイテムを並べ替えるときにアクセスできるようにするには、2つの情報が必要です。親要素のid - doesntのがある場合は親要素のタイトルに保存されている(0を親要素)とリストのid(list1とlist2 - list3ではなく)。 これはどのように実装しますか? 何か情報を歓迎します。

PS:私はUIでかなり新しいです。

答えて

0

ここでは、溶液でjsfiddleを作った。主な考え方はsortablecontainmentプロパティを使用して、すべてのリストがそれ自身の中にとどまるようにすることです。

+0

ありがとうございました! – Zoli

関連する問題