Страница 1 из 1

Сортировка вложенных списков

СообщениеДобавлено: 10 окт 2009, 19:53
Mary
Подскажите пожалуйста. Вот у меня есть вложенный список типа
Код: Выделить всё
<ul>
   <li>test
   <ul>
      <li>test1<ul></ul></li>
      <li>test1<ul></ul></li>
      <li>test1<ul></ul></li>
   </ul>
   </li>
   <li>test2<ul></ul></li>
</ul>

для его сортировки использую js-код:
Код: Выделить всё
$('ul').sortable({
   connectWith: 'ul',
   dropOnEmpty: true,
   placeholder: 'ui-state-highlight',
   forcePlaceholderSize: true,
   scroll: true
});

В итоге сортировка, понятно, работает, сортируются пункты списка, есть возможность перетащить пункт списка первого уровня во второй, все замечательно. А вот обратно - никак. Т. е. test1 я не могу перетащить и поставить после test2 на одном с ним уровне, если пытаюсь тащить, то он почему-то становится только потомком test2. Есть мысли, как это исправить? Я уже все параметры sortable перебрала, ничего не помогает :cry:

Re: Сортировка вложенных списков

СообщениеДобавлено: 22 окт 2009, 18:28
admin
Список вложенный в элемент другого списка вызывает трудности, при перемещении его элементов внутри родительского списка, поскольку для того чтобы списки могли принимать элементы другого списка необходимо пересечение границ списка, иначе sortable не будет вести себя так как Вам нужно. По крайней мере я не встречал решение данного недостатка. Возможно Вам будет удобно использовать следующую структуру.
Код: Выделить всё
<script type="text/javascript">
jQuery(document).ready(function(){

$("#sortable1, #sortable2, #sortable3").sortable({
         connectWith: '.connectedSortable',
         dropOnEmpty: true
});

});
</script>

<ul id="sortable1" class="connectedSortable">
   <li>Item 1</li>
   <li>Item 2
<ul id="sortable2">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

<ul id="sortable3" class="connectedSortable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

Re: Сортировка вложенных списков

СообщениеДобавлено: 22 июл 2010, 12:24
SerzN1
решение такое
важен только класс sortable

Код: Выделить всё


$(".sortable").sortable({
   connectWith: '.sortable',
   dropOnEmpty: true
});

<ul id="sitemap" class="sortable">
            <li id="id1_1"><a href='/about/'>О микрорайоне</a><span class="ui-icon ui-icon-search"></span><span class="ui-icon ui-icon ui-icon-gear"></span><span class="ui-icon ui-icon-cancel"></span><span class="ui-icon ui-icon-trash"></span>
               <ul class="sortable">
                  <li id="id11_1"><a href='/about/arch/'>Архитектура</a></li>
                  <li id="id11_2"><a href='/about/infra/'>Инфраструктура</a></li>
                  <li id="id11_3"><a href='/about/place/'>Местоположение</a></li>
                  <li id="id11_4"><a href='/about/ingeneer/'>Инженерия и Инновации</a></li>
                  <li id="id11_5"><a href='/about/Documents/'>Документы</a></li>
               </ul>
            </li>
            <li id="id1_2"><a href='/genplan/' class='sel'>Генплан</a>
               <ul class="sortable">
                  <li id="id21_5"><a href='/genplan/Types/'>Типы домов</a></li>
               </ul>
            </li>
            <li id="id1_3"><a href='/gallery/'>Фотогалерея</a></li>
            <li id="id1_4"><a href='/Members/'>Участники Проекта</a></li>
            <li id="id1_5"><a href='/sale/'>Условия продаж</a></li>
            <li id="id1_6"><a href='/contacts/'>Контакты</a></li>
         </ul>



для полного счастья придется дописывать в каждый элемент пустой список чтобы можно было в него поместить перетаскиваемые строчки
пока что нормально "serialize" не проходит так что придется делать подругому