Сортируемая проблема jquery.ui

Question

Я создал вложенный список с функцией перетаскивания. Моя проблема в том, что я хочу, чтобы каждое вложение сортировалось само по себе. Например:

-first_level
-first_level
 -second_level
 -second_level
-first_level

«Первый уровень» не должен быть в состоянии перейти на «Второй уровень» и наоборот. Я думал, что смогу сделать это с опцией сдерживания, но без кубиков. Он работает с удержанием второго уровня вне первого уровня, но не наоборот.

Вот мой пример JS и список:

$("#sort_list").sortable({
  containment: '#sort_list',                                             
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>   

Есть идеи? Спасибо, ребята!

Answer 1

Попробуйте задать опцию сдерживания сложным селектором, например:

$("#sort_list").sortable({
  containment: '#sort_list:not(.sub_list)',                                                                                     
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});

То, что должно добиться цели, если вы используете jQuery 1.3 +:

(из руководства )

Начиная с jQuery 1.3: not () также поддерживает селекторы, разделенные запятыми и сложные селекторы, например: : not (div a) и: not (div, a).

В руководстве jQuery Sortable говорится, что опция сдерживания :

Ограничения перетаскивания в пределах границы указанного элемента - можно быть DOM-элементом 'parent', «документ», «окно» или jQuery селектор. * * тысяча двадцать-один

Answer 2

Хорошо, похоже, я нашел проблему. Я объявлял: items: 'li', поэтому UL не определялся как контейнер / сортируемый элемент. Большое спасибо karim79 за помощь в продумывании всего этого:)

Ниже приведен рабочий код (в основном он говорит: «Все остаются в своем собственном контейнере»):

    $("#sort_list").sortable({
      containment: 'parent',                                                                                     
      axis: 'y',
      revert: true,
      opacity: 0.8
    });
    $(".sub_list").sortable({ 
      containment: 'parent',
      axis: 'y',
      revert: true,
      opacity: 0.8,
    });
    $("#sort_list").disableSelection();

    <ul id="sort_list">
      <li>one</li>
      <li>two
        <ul class="sub_list">
        <li>sub one</li>
        <li>sub two</li>
        </ul>
      </li>
      <li>three</li>
      <li>four</li>
    </ul>

Теперь, когда мы выяснили «item: li», мы можем даже удалить содержание: «parent» из верхнего списка, не опасаясь столкновения списков.