jQuery UI сортируется так же, как список файлов и папок в Windows Explorer - PullRequest
Новая
       9

jQuery UI сортируется так же, как список файлов и папок в Windows Explorer

3 голосов
/ 20 декабря 2011

Я хотел бы создать проводник Windows, подобный сортируемому для проекта веб-сайта.

Возможно ли это удаленно с помощью jQuery или просто мечтой? Я новичок в jQuery и совсем недавно начал играть с сортируемым виджетом пользовательского интерфейса. Любые указатели очень ценятся.

Пример:

  • Папка 1
    • Элемент 1
    • Позиция 2
    • Позиция 3
  • Папка 2
    • Позиция 4
    • Позиция 5

Папки должны сортироваться так, чтобы нижележащие элементы следовали за папкой, когда она перемещалась вверх / вниз в списке.

Я бы также хотел, чтобы элементы в каждой папке можно было сортировать в папке и перемещать из одной папки в другую. Так же, как перетаскивание файлов между папками в проводнике 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>

Сортировка папок и элементов теперь работает нормально, теперь мне нужно сделать ее динамической, чтобы поддерживать создание сортируемых файлов на лету ...

1 Ответ

3 голосов
/ 20 декабря 2011

Это может быть то, что вы ищете, если не попытаться найти вложенную сортируемую (или варианты) в Google ...

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

это действительно потрясающий плагин

...