jQuery UI sortable just like Windows Explorer file/folder list

Question

I'd like to create a Windows Explorer like sortable for a website project.

Is this remotely possible with jQuery or just a dream? I'm new to jQuery and just recently started playing around with the UI sortable widget. Any pointers are greatly appreciated.

Example:

• Folder 1
  • Item 1
  • Item 2
  • Item 3
• Folder 2
  • Item 4
  • Item 5

Folders should be sortable so that the underlying items follows with the folder when it's moved up/down in the list.

I'd also like the items in each folder to be sortable within a folder and movable from one folder to another. Just like dragging and dropping files between folders in Windows explorer.

The folder/item list will be populated dynamically (ajax/php), meaning there could be any number of folders/items at a given time and users would also be able to add folders/items at runtime.

Anybody done something like this already?

Best regards,

Andreas

EDIT 1:

Ok, so it seems to be quite possible, this is what I've got so far, nesting the sortables to suit my needs...

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

Sorting folders and items works fine now, next I need to make it dynamic to support creating sortables on the fly...

Answer 1

This might be what your looking for, if not try looking up nested sortable(or variations) on google...

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

this is a really awesome plugin