jQuery UI可排序，就像Windows資源管理器文件/文件夾列表

Question

我想創建一個Windows資源管理器可排序的網站項目。

這是遠程可能的jQuery或只是一個夢想？我是jQuery的新手，剛剛開始玩UI可分類小部件。任何指針都非常感謝。

實施例：

• 文件夾1
  • 項目1
  • 項目2
  • 項目3
• 文件夾2
  • 項目4
  • 項目5

文件夾應該是可排序的，這樣的標的物時，它的上升在列表中/下與文件夾如下。

我還希望每個文件夾中的項目可以在一個文件夾內排序，並可以從一個文件夾移動到另一個文件夾。就像在Windows資源管理器中的文件夾之間拖放文件一樣。

文件夾/項目列表將被動態填充（ajax/php），這意味着在給定時間可以有任意數量的文件夾/項目，用戶也可以在運行時添加文件夾/項目。

有人做過這樣的事嗎？

最好的問候，

安德烈亞斯

編輯1：

好了，這似乎是完全可能的，這是我這麼遠，嵌套sortables，以適應我的需求......

<script> 
     $(function() { 
     $("#sortablefolders").sortable(); 
     $("#sortablefolders").disableSelection(); 
     }); 

     $(function() { 
     $("#sortableitems1, #sortableitems2, #sortableitems3").sortable({ 
      connectWith: ".connectedSortable" 
     }).disableSelection(); 
     }); 
    </script> 

    <div id='explorermenu'> 
     <ul id='sortablefolders'> 
     <li> 
      <div class='folder'> 
      <p>Folder 1</p> 
      <ul class='connectedSortable' id='sortableitems1'> 
       <li>Item 1</li> 
       <li>Item 2</li> 
      </ul> 
      </div> 
     </li> 
     <li> 
      <div class='folder'> 
      <p>Folder 2</p> 
      <ul class='connectedSortable' id='sortableitems2'> 
       <li>Item 3</li> 
       <li>Item 4</li> 
      </ul> 
      </div> 
     </li> 
     <li> 
      <div class='folder'> 
      <p>Folder 3</p> 
      <ul class='connectedSortable' id='sortableitems3'> 
       <li>Item 5</li> 
       <li>Item 6</li> 
      </ul> 
      </div> 
     </li> 
     </ul> 
    </div> 

排序文件夾和項目工作正常，現在，未來我需要使它的動態支持創建sortab萊斯在飛行...

Answer 1

，這可能是你在尋找什麼，如果不嘗試查找嵌套排序（或變化）對谷歌...

http://mjsarfatti.com/sandbox/nestedSortable/

這是一個真正真棒插件