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

Question

我想为网站元素创建一个类似于 sortable 的 Windows 资源管理器。

这对于 jQuery 来说是遥不可及的，还是只是一个梦想？我是 jQuery 的新手，最近才开始使用 UI 可排序小部件。非常感谢任何指针。

例子:

• 文件夹 1
  • 元素 1
  • 第 2 项
  • 第 3 项
• 文件夹 2
  • 第 4 项
  • 第 5 项

文件夹应该是可排序的，这样当它在列表中向上/向下移动时，底层元素会跟随文件夹。

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

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

有人做过这样的事情吗？

最好的问候，

安德烈亚斯

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

这可能是您要找的东西，如果不是，请尝试在 google 上查找嵌套排序(或变体)...

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

这是一个非常棒的插件