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

Question

我想为一个网站项目创建一个像可排序的Windows资源管理器

这是远程可能与jQuery或只是一个梦想?我是jQuery新手，最近才开始使用UI可排序小部件。任何建议都非常感谢。

的例子:

• 文件夹1
  • 第1项
  • 项3
• 文件夹2
  • 第四项
  • 第五项

文件夹应该是可排序的，以便当文件夹在列表中向上/向下移动时，底层项目跟随文件夹。

我还希望每个文件夹中的项目在一个文件夹内可排序，并从一个文件夹移动到另一个文件夹。就像在Windows资源管理器的文件夹之间拖放文件一样。

文件夹/项目列表将动态填充(ajax/php)，这意味着在给定的时间可以有任意数量的文件夹/项目，用户也可以在运行时添加文件夹/项目。

有人已经做过这样的事情了吗?

最诚挚的问候,Andreas

编辑1:

好的，所以这似乎是很可能的，这就是我目前所得到的，嵌套排序以满足我的需要…

    <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>

排序文件夹和项目现在工作得很好，接下来我需要使其动态，以支持在飞行中创建排序表…

Answer 1

这可能是你所寻找的，如果没有尝试查找嵌套排序(或变体)在谷歌…

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

这个插件真的很棒